Vuex的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex的工作流程如下图：
应用程序的数据位于state中，Vue组件获取state的数据并渲染，并且state中的数据是响应式的，会将数据的改变同步到页面上；需要更改state中的数据时，要先将改变分发给actions，由actions异步地与后端交互并根据后台的响应将改变提交给mutations（如果不与后端交互，可以直接提交给mutations）；mutations接收到改变数据的请求后会更改state中的数据，同时会被调试工具监控到，记录下来（Vuex中只能通过mutations更改state中的数据）

通过Vuex可以统一清晰地管理应用程序的数据，同时使数据与组件分离，不会因为组件的销毁而丢失

Vuex的使用
vue安装vuex插件，构建state、actions、mutations，构建vuex实例

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex);

const actions = {
	//第一个参数为一个与 store 实例具有相同方法和属性的 context 对象，可以通过context.commit来提交一个 mutation，也可以通过context.state
	//来访问state中的数据，第二个参数是vuex实例分发时传入的参数
    add(context, value) {
    	//提交给对应的mutation
        context.commit('ADD', value);
    }
}
const mutations = {
	//第一个参数为当前state，第二个参数为vuex提交时携带的参数
    ADD(state, value) {
        state.sum += value
    }
}
const state = {
    sum: 0
}
export default new Vuex.Store({
    actions,
    mutations,
    state
})

将vuex实例挂载到vue原型链上

import Vue from 'vue'
import store from "./store"

Vue.prototype.$store = store;

在模板中引用state中的数据

<h1>和为{{ $store.state.sum }}</h1>

将改变分发给actions

methods: {
    add() {
    //第一个参数为action的名字，第二个参数为传递的参数
      this.$store.dispatch('add',this.num);
    }
}

直接提交给mutations

methods: {
    add2(){
    	//第一个参数为mutation的名字，第二个参数为传递的参数
        this.$store.commit('ADD',this.num);
    }
}