vuex是什么

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我的理解：

作用：跨组件传输数据

• state
  • 保存公共的数据类似于data
  • 在组件中直接用 this.$store.state.属性名 来调用
  • 或者使用把Vuex中的公共数据引入到组件中，当作计算属性 来使用

import { mapState } from 'vuex'

export default {
  name: 'app',
  components: {
    AddItem,
    SubItem
  },
  // 下面的代码中有几个计算属性？
  // 2个。
  // 名字分别是： cA,count
  computed: {
    // 定义App.vue自已的计算属性
    cA () {
      return 100
    },
    // 调用 mapState这个函数，把得到的对象合并到当前的外层对象computed中
    ...mapState(['count'])
  }
}

ps: ...obj是es6新增的扩展运算度

mutations:

在vue中，不推荐直接在组件内部通过this.$store.state.全局数据名称=新值,来修改vuex数据，而推荐使用mutation来修改

定义格式：

mutations需要在创建vuex.store实例的时候所传入的参数对象中的mutations项，具体格式如下：

new Vuex.Store({
    state:{},
    mutations:{
        // 函数名可以是任意合法的函数名
        // 参数1：表示当前state,
        // 参数2：可选。它表示调用函数1时，传入的参数。
        // 特殊之处：在定义函数时，第一个参数就表示当前vuex中的state
        //          直接在此函数内部去修改state.
        //          在调用这个函数时，第一个参数不要传入。
        函数名1(参数1,参数2){
            // 在函数内部，修改state中的数据
        }
    }
})

使用mutations:

在组件内部想要使用定义在mutations的方法来改变state中的值有两种方式：
方式一：直接调用
this.$store.commit('方法名'，参数)

方式二：映射为组件中的methods方法

<script>
// 在组件中通过映射的方式来使用vuex中的mutations
// 1. 引入工具函数
import { mapMutations } from 'vuex'
// mapMutations 是一个函数，在vue中定义的。
// mapMutations(['方法名'])的返回值是一个对象
//       这个对象类似于{mAdd1:function(){}, mAddN:function(){}}
// 2. 在methods中 插入 映射函数的结果

export default {
  name: 'SubItem',
  // 下面的代码中，相当于methods中定义了 4个方法 
  // sub,mAdd1,mAddN, test
  methods: {
    sub () {
      this.$store.state.num--
    },
    ...mapMutations(['方法名1', '方法名2']),
    test () {
      // 由于上面的mAdd1并映射成方法，所以这里可以直接加this.来访问。
      // this.方法名1()
         this.方法名2()
    }
  }
}
</script>