Vuex（state/mutations/getters）

Vuex是什么？

Vuex是Vue配套的公共数据管理工具，我们可以将共享的数据保存到Vuex中，方便项目中的任何组件获取和修改vuex中的数据。

为什么要使用Vuex?

在企业开发中，我们遇到两个问题：
1、如果想要在子组件中使用祖先组件的数据，只能一级一级的往下传递，很麻烦！
2、兄弟组件间不能直接传递数据，若兄弟组件间想要传递数据，只能借助父组件！
解决方法：使用Vuex

Vuex共享数据：

在Vuex中：

1、State 属性是 Vuex 这一状态管理工具的唯一的数据源，所有的共享数据都储存在里面（ 类似data）。
2、mutation属性 是 Vuex 中改变 state 唯一的方法。
mutation的使用与事件处理函数非常相似，都具有类型和回调函数(类似methods，不过获取state中的变量不是this.变量名，而是state.变量名)。
3、getters属性类似组件中的计算属性（computed）,当数据被调用过且没发生改变时，之后的调用就到缓存区中找。
使用getters中的数据：this.$store.gettters.方法名

在组件中：

1、先在祖先组件中保存共享数据（后代组件可直接使用）： store:store
2、使用共享: this.$store.state.数据名
3、调用Vuex的mutations中的函数修改共享：this.$store.commit('方法名')
4、 使用getters中的数据：this.$store.getters.方法名
e.g.

export default new Vuex.Store({
  state: {  // 保存共享数据，类似data
    count: 0
  },
  mutations: {  // 保存修改共享数据的方法 ,类似methods
    decrement (state) {
      state.count--
    },
    increment (state) {
      state.count++
    }
  }，
  getters:{//类似计算属性computed
    fn (state) {
      return state.count+"拼接内容"
    }
  }
})

在组件中：

<template>
  <div class="about">
    <button @click="mAdd">增加</button>
    <button @click="mSub">减少</button>
    //2、使用共享数据  this.$store.state.数据名
    <span>{{this.$store.state.msg}}</span>
    //使用getters：this.$store.getters.方法名
    <span>{{this.$store.getters.fn}}</span>
  </div>
</template>

export default {
  data () {
    return {
      count: 1
    }
  },
//1、先在祖先组件中保存共享数据，后代组件可直接使用
  store:store,
  methods:{
    mAdd (){
      //调用Vuex的mutations中的函数修改共享数据
      this.$store.commit("increment");
    },
    mSub () {
      this.$store.commit("decrement");
    } 
  }
}