Vuex

Vuex是Vue的全家桶之一，官方称之为状态管理模式。数据存储于state属性中。

类似于router的注册和引入方式：

//main.js
import router from './router'
import store from './store'

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

state属性

state属性负责存储全局的状态变量，换言之全局变量，通过Vue框架实现了数据双向绑定，响应式。

//store/index.js
  state: {
    isD:false
  },

面试Vuex时的常考点。

mutations属性用于直接操作修改state中的数据，可以理解为set方法，类似于methods作用。mutations单词本意为变化。

  mutations: {
    De(state){
      state.isD = true;
      sessionStorage.setItem('isD',state.isD)
    }
  },

mutations中的方法，默认接收一个参数state，可自定义名字，该参数为store实例中的state属性。第二参数为调用时传入的自定义参数，通常是对象形式数据整体，例如下面例子。

写好后，我们通过store实例中commit方法来执行mutations方法（提交）：

this.$store.commit('De')
this.$store.commit('De',{key:123, name:"ok"})

更多特点我们在actions中进行比较说明。

actions属性是对mutations的封装，我们在actions的方法中触发mutations里的方法，强调动作操作。

  actions: {
    Dde(context){
      context.commit('De');
      console.log('提交了mutations的方法')
    }
  },

我们发现actions方法的参数一默认就是store实例，所以我们可以在actions方法中执行commit对mutations方法进行调用。而后续的的参数同样是接收传入的自定义参数。

解构简化：

    Dde({commit}){
      commit('De');
      console.log('提交了mutations的方法')
    }

我们通过store实例上的dispatch方法执行actions方法：

    this.$store.dispatch('Dde');