Vuex

哪里有梦，哪里有家，哪里有故事哪里有她，哪里能盛开复制的花

关于Vuex ( 最下方有代码 )

什么是Vuex、Vuex的概念

1、vuex是对数据的管理者。管理方式是对数据进行集中式管理。

2、可以解决VUE当中的传递繁琐的问题。通过VUEX来对数据进行传值。vuex可以对数据进行共享

（在任何组件当中使用其数据，并且某个组件数据发生变化，相对应的组件也会发生变化。也是双向绑定。）

3、在vuex中必须遵循单项数据流(保证组件不受影响)

4、最好的一种非父子传值的一种方案

5、vuex中存放了所有公用的状态

Vuex单向数据流操作

当组件需要修改state中的数据的时候必须通过dispatch来触发actions里面的方法，actions的每一个方法里面都会有一个

commit方法，用来触发mutations里面的方法,  mutations用来修改state中的数据。当mutations里面的方法触发的时候数据

就会发生改变，因为数据是响应式因此组件中的数据也会发生改变

一、

仓库中的数据在某个组件中使用:

因为仓库已经放到vue的实例中通过this是可以使用的,在组件中通过打印this查到里面的数据

渲染(在组件中渲染):{{this.$store.state.数据中的属性名}}

render把虚拟DOM渲染为真是DOM

 

二、

如何修改state中的数据:  (遵循单项数据流)

通过Dispath触发actions中的方法：(打印this查看详情)

actions:{handleAdd(){console.log("handleAdd触发了")}

actions中的方法在使用的组件中如何调用:

this.$store.dispatch("actions中的方法名")  

 

三、  

在通过Commit触发Mutations中的方法，Commit在哪呢?

actions中的每一个方法都有一个合并后的对象

actions:{handleAdd(...dest){console.log("handleAdd触发了",dest)} Commit就在这里

这时dispatch可以传参了this.$store.dispatch("actions中的方法名",111)

通过commit触发Mutations中的方法：

Mutations:{方法名(){}}

在actions中的方法第一个参数解构出commit(对象的解构)

actions:{handleAdd({commit},params){//用一个commit方法

    commit("Mutations中的方法名")

}触发成功后可以修改数据了

Mutations中的方法也有两个参数1.state对象;2.commit方法中传递过来的参数

Mutations:{方法名(state,params){}}

 

四、

Mutations:{方法名(state,params){1.state对象中的数据；2.commit方法中传递过来的参数

    state.数据中得属性

    数据改变后组件中的数据也是发生改变的

}} 

Vue_vuex_辅助函数_mapState( 只能与computed用 )

state的辅助函数必须要在computed中使用

在渲染(当前)组件中引入vuex: import Vuex from "vuex";

一、数组型

在computed计算属性中写：computed:Vuex.mapState(["数据中的属性名"])//这是computed的属性值

上方渲染区: {{数据中的变量名}}

再也不用this.那些东西

 

二、对象型

可以改名字   数组改不了

在computed计算属性中写：computed:Vuex.mapState({属性名:"数据中的属性名"})

上方渲染区: {{对象中的属性名}}

 

三、函数型 (箭头函数,此方法只能在mapState中使用)

可以对数据渲染之前作二次更改 在函数中做做完在返回去

在computed计算属性中写：computed:Vuex.mapState({属性名:state=>state.数据中的属性名})

 

四、最终写法(解构型)(避免了写不了监听，可以继续向下操作)

computed:{...Vuex.mapState({n : state=>state.n})}

此函数执行完后会返回一个对象===对象做了个展开

Vue_vuex_辅助函数_mapActions

在渲染(当前)组件中引入vuex: import Vuex from "vuex";

actions的辅助函数:没有必要再去声明一个函数

一、函数型

在methods中写: ...Vue.mapActions(["store.js中actions的函数名"]) 

上方调用时只需调用中括号中的函数触发的是store中的函数不是组件中的函数  

二、对象型

在methods中写: ...Vue.mapActions(属性名:"store.js中actions的函数名")

上方调用时只需调用属性名  

Vue_vuex_辅助函数_mapMutations

在渲染(当前)组件中引入vuex: import Vuex from "vuex";

Mutations的辅助函数:

直接触发Mutations中的方法:

在没有异步和业务逻辑的时候是可以直接调用Mutations中的方法的但是不能直接修改数据

也是在methods中使用：

一、函数型

在methods中写: ...Vue.Mutations(["store.js中Mutations的函数名"]) 

上方调用时只需调用中括号中的函数触发的是store中的函数不是组件中的函数  

二、对象型

在methods中写: ...Vue.mapMutations({属性名:"store.js中Mutations的函数名"})

上方调用时只需调用属性名    

Vue_vuex_getters属性及辅助函数

在仓库中:

getters中的每一个函数都会有一个参数 这个参数是state    

getters:{

    方法名(state){//必须要有返回值

        return state.操作

    }

}    

辅助函数:

在渲染(当前)组件中引入vuex: import Vuex from "vuex"

在computed中写:...Vuex.mapGetters(["方法名称"])

...Vue.mapGetters({属性名:"方法名称"})    

代码

        actions
        用来处理异步 以及一些业务逻辑

        actions里面所以的函数都会有2个参数
        参数1 为一个对象 包含{commit dispatch state}
        参数2:是传递过来的参数

        actions里面的方法如果想要触发的时候必须通过dispatch

        辅助函数
        mapActions

          方案一：
            methods: {
                ...Vuex.mapActions(["handleAdd"])
              }


          方案二：
               methods: {
                  ...Vuex.mapActions({
                      Add:"handleAdd"
                  })
              }

    mutations
        用来做数据的增删改查   mutations里面的方法用来修改state中的数据

        mutations里面的所有函数都会有2个参数
          参数1：state
          参数2：传递过来的参数


        mutations里面的方法想要触发的时候必须通过commit



        辅助函数
        mapMutations
              methods: {
                ...Vuex.mapMutations(["handleMutationAdd"])
              }


               methods: {
                ...Vuex.mapMutations({
                  handleMutationAdd:"handleMutationAdd"
                })
              }




      getters:
          getters就相当于组件中的computed一样，也是可以进行数据的缓存
          主要的作用：监听state中数据的变化，当state中的数据发生改变的时候就会触发getters里面的方法


          getters中的每一个函数都会有一个参数 这个参数是state


          辅助函数
          mapGetters


          computed:{
            ...Vuex.mapGetters(["方法名称"])
          }

          computed:{
            ...Vuex.mapGetters({
              key:"方法名称"
            })
          }