很多刚学习vue的人对于全局变量管理工具vuex都觉得很神秘，今天就用很通俗的大白话协助大家理解一下vuex，作者的vue项目使用vue脚手架搭建的，用脚手架搭建的项目会在src文件夹下有一个store文件，打开store文件，会看到里边有index.js，getters.js，actions.js这几个js文件（如果没有的话就自己建一下）。那么vuex的核心就在这几个文件当中，其实vuex最核心的就四部分：state（全局变量），mutations（修改全局变量的方法），actions（用于提交mutations的方法），getters（其他vue组件读取state变量的中间变量，作者理解，该处相当于导出了state）。接下来开始上代码进行分析。
store.js文件中代码
该部分代码定义了全局变量state，并在mutations中定义了修改state的方法
import Vue from 'vue' // 首先导入vue import Vuex from 'vuex' // 导入vuex import * as actions from './actions' // 将actions方法导入 import * as getters from './getters' // 将getters导入 Vue.use(Vuex) // 变量初始化 const state = { count: 10 } // 定义 mutations（即对变量state进行的操作） const mutations = { INCREMENT(state, canshu) { state.count++ }, DECREMENT(state) { state.count-- } } // 创建 store 实例（先不着急看该部分代码，该部分就是将全局变量，mutations,actions,getters整体变成一体化的实例） export default new Vuex.Store({ actions, getters, state, mutations }) actions.js中的代码 之所以用actions去提交mutations，应该是为了是的mutations中的方法可以异步操作（mutations中方法为同步执行，该处可能会迷惑，但是其实就是用actions中的方法去调用mutations中的方法而已）。 // 用于提交mutations中的INCREMENT方法（可根据自己的需要进行传参，对应的mutaitons中要接收参数） export const increment = ({commit}) => { commit('INCREMENT', canshu) } // 用于提交mutations中的DECREMENT方法 export const decrement = ({commit}) => { commit('DECREMENT') }
getters.js中的代码
一般getters中的代码比较简单，主要就将全局变量简单封装并导出，方便其他组件的调用。
// 该处将全局变量state下的count导出，是的其他vue组件都可以获取，进行修改 export const getCount = state => { return state.count }
上面对vuex的几个组成部分进行了基本的了解，要使得整个项目使用vuex进行全局变量管理，要在main.js中引入vuex，并使用
在main.js中引入vuex（该部分引入在store.js添加也可）
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
至此，项目已经引用了vuex，接下来告诉大家如何在组件中引入
假如我们要在一个名为test.vue的组件中，对全局变量state.count进行修改
<script> import { mapGetters } from 'vuex' import { mapActions } from 'vuex' export default { computed: { // 使用对象展开运算符将 getters 混入 computed 对象中 ...mapGetters(['getCount']) }, methods: { ...mapActions([ 'increment', // 映射 this.increment() 为 this.$store.dispatch('increment') 'decrement' ]), test: function() { this.increment(1) // 该处即可向调用当前页面的其他方法一样进行调用actions中的方法 console.log(this.getCount) // 同理，也可以像调用本地data值的方式调用全局变量 } } } </script>
