我对vuex的浅见

vuex:
    状态管理模式--->公共的数据仓库

  1、安装(需先安装vue)
    cnpm install vuex --save-dev

  2、创建仓库  创建一个store文件夹 store/index.js

    将vuex挂载在vue身上

    import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);
    const store= new Vuex.Store{}
    export default store


    3、store里面的状态不能够直接进行修改  而是必须通过mutations

    state:存放的是公共的状态  辅助函数  mapState   
      mapState的用法由3种
    1、computed: Vuex.mapState(["message","age"]),
    2、computed: {
          ...Vuex.mapState(["message"])
    },
    3、computed: {
        ...Vuex.mapState({
          msg:state=>state.message
        })
    },

    mutations:用来修改state里面的数据  当前对象下面所有的函数都会接受到2个参数 
    参数1；是state
    参数2：需要修改的值

      特点
        只能做同步操作 
        不能包含业务逻辑
        不能操作异步 
        用途主要用来修改数据

    辅助函数
      mapMutations:辅助函数



    actions:用来操作业务逻辑和异步操作
      调用actions的时候必须通过dispatch进行触发actions里面的方法







edtion2

初始化
1、import  Vue from "vue";
2、import Vuex from "vuex";
Vue.use(Vuex);



new Vue({
    el:
    Store
})
3、创建store

const Store = new Vuex.Store({

})

new Vuex.Store:有很多个属性
    state  mutations  actions  getters  modules


数据(状态)(属性)-----state--------------------------------computed中用

  this.$store.state.属性


  辅助函数：mapState
  1、引入vuex ,在computed里面将所需要的属性遍历出来

  computed:{
      (1)...Vuex.mapState(["属性","属性"])
      (2)...Vuex.mapState({
          key:state=>state.属性
      })
  }


  2、修改数据---mutations---------------------methods里用 
  只要数据需要发生改变那么就必须调用mutations里面的方法

  如果需要调用mutations里面的方法必须要用commit(参数1，参数2)
  参数1：函数名称
  参数2：需要传递的参数


  辅助函数：mapMutations()
  1、引入vuex ,在methods里面将所需要的方法遍历出来

  methods:{
      ...Vuex.mapMutations({
          key:"方法名"
      })
  }

通过commit的方式来触发mutations里面的方法
this.$store.commit(方法名称)


3、actions:操作异步和业务逻辑--------------------------methods里用
    actions这个对象里面所有的方法都会由一个参数 (对象)----》commit.
    当actions里面的方法触发的时候 会调用commit这个方法来触发mutations里面的方法

this.$store.dispatch("方法名称")


4.getters---------------computed里用
同computed，只不过computed是根据data里的值计算，
而getters根据state值计算
 getters:计算属性  数据放在缓存   只要state里面的数据发生改变那么getter里面的方法就会被执行

    辅助函数
        mapGetters()
辅助函数
 1、引入vuex ,在methods里面将所需要的方法遍历出来
methods:{
    ...vuex.mapActions({
        key:"方法名"
    })
}

 modules:模块   作用是将所以的数据进行模块的拆分 而不是放在一个store里面这样不方便管理

    注意在每个小模块导出的时候一定要去加命名空间 namespaced=true  这样就不会出现命名冲突
    如果想要调用小模块里面的方法  则需要加上小模块的名称
        例如
         handleAdd:"goodsStore/handleAdd"



当组件操作状态的这时候->通过dispatch调用actions里面的方法（actions操作异步和业务逻辑）->actions里面的方法触发commit->commit执行后会触发mutations里面的方法
用来做数据的修改，当数据修改完毕后，state发生改变  数据是双向绑定的，因此view层的数据也会发生改变