这段时间我一直在使用vue写项目。项目中也会用到Vuex，但是总有一种朦胧的感觉。于是我决定彻底了解一下。 看了一下午的官方文档和资料，发现vuex原来这么简单！ 作为圈内人，我决定输出文档。如果你仔细阅读了这篇文章，我保证你已经精通vuex了。 我把我的代码上传到github了。如果需要的话可以拉下来：github 首先我们先来说说vuex到底是什么？ vuex 是专门为 vue.js 应用程序开发的状态管理模式。 我们可以将这种状态理解为数据中的属性，需要与其他组件共享。 换句话说，就是我们需要共享和使用vuex进行统一集中管理的数据。 在vuex中，默认有五个基本对象： state：存储状态（变量） getters：数据获取前重新编译，可以理解为state的计算属性。我们在组件中使用 $www.sxzhongrui.com() 突变：修改状态并且是同步的。在组件中使用 $store.commit('',params) 。这与我们组件中的自定义事件类似。 actions：异步操作。组件中使用的是 $store.dispath('') Modules：store的子模块，用于开发大型项目，方便状态管理。这里就不解释了，和上面一样。 现在我们正式开始一步步使用vuex 1.首先创建一个vue-cli项目 执行以下命令创建app项目（这里也可以使用其他非webpack模板和非app名称） vue 初始化 webpack 应用 2.创建完成后，我们进入文件夹并运行项目 cd 应用程序/ npm run dev 接下来我们在src目录下创建一个vuex文件夹 并在vuex文件夹下创建store.js文件 文件夹目录如下所示 3.我们还没有引入vuex。我们需要先下载vuex并引入它。 确保在我们的项目下，在命令行输入以下命令安装vuex npm 安装 vuex --save 4.安装成功后，我们就可以在store.js中玩我们的vuex了！在store.js文件中，引入vuex并使用vuex。这里注意我的变量名是大写的 Vue 和 Vuex 从 'vue' 导入 Vue 从 'vuex' 导入 Vuex Vue.use(Vuex) const state = { count: 0 } 导出默认 new www.sxzhongrui.com({ state }) 接下来在main.js中引入store 从 'vue' 导入 Vue 从 './App' 导入应用程序 从 './router' 导入路由器 从 './vuex/store' 导入商店 Vue.config.productTip = false new Vue({ el: '#app',路由器、商店、组件：{ App }、模板：'' }) 然后我们就可以在任何组件中使用我们定义的 count 属性了。 这里我们在helloWorld中使用它来删除helloworld.vue中未使用的标签 打开我们刚刚运行项目的浏览器，可以看到已经使用成功了！ 并且在vue开发工具中我们可以看到我们定义的变量count 至此，已经成功一半了！ vuex是不是很简单？ 回想一下，我们只需要在下载和安装过程中使用vuex，在我们定义的store.js中定义state对象，并将其暴露出来。 在main.js中使用我们的store.js（这是为了防止在各个组件中引用它，因为main.js中有我们新的Vue实例！） 现在我们已经使用了vuex中的state，那么我们如何操作这个值呢？这是正确的！使用突变和动作 我们继续操作store.js文件 我们在 sotre.js 中定义突变对象。该对象中有两个方法。 Mutations中的参数，第一个默认为state，后面的为自定义参数。我们在mutations中定义了两个方法，increase和decrease，并设置一个参数n，默认值为0，然后在www.sxzhongrui.com中使用 constmutations={mutationsAddCount(state,n=0){return(state.count+=n)},mutationsReduceCount(state,n=0){return(state.count-=n)}}导出默认新www.sxzhongrui.com ({ 状态, 突变 }) 然后我们在helloWorld.vue中使用这个方法 还记得我们如何在组件中使用突变吗？与自定义事件非常相似 方法： { handleAddClick(n){ this.$store.commit('mutationsAddCount',n); },handleReduceClick(n){ this.$store.commit('mutationsReduceCount',n); } } 来浏览器看看它是如何工作的吧！ 我们可以看到，每当事件被触发的时候，我们就可以在vue开发工具中看到我们触发的mutations方法，以及参数 完美的！ 接下来是actions，actions是异步操作 创建动作对象并使用 这里我在两个方法中使用了两个不同的参数，一个是context，它是与store对象具有相同对象属性的参数。在第二个函数中，我直接使用这个对象的commit方法。 这只是取决于每个人的喜好const actions = { actionsAddCount(context, n = 0) { console.log(context) return context.commit('mutationsAddCount', n) }, actionsReduceCount({ commit }, n = 0) { return commit('mutationsReduceCount', n) } } 导出默认 new www.sxzhongrui.com({ 状态, 突变, 动作 }) 在 helloWorld.vue 中 在methods中，添加两个方法，并使用dispath来触发
异步运行
异步增加 异步减少
handleActionsAdd(n){ this.$store.dispatch('actionsAddCount',n) }, handleActionsReduce(n){ this.$store.dispatch('actionsReduceCount',n) } 进入您的浏览器，看看它是如何工作的！ 终于有吸气剂了 我们一般使用 getter 来获取我们的状态，因为它是状态的一个计算属性 const getters = { getterCount(state, n = 0) { return (state.count += n) } } 导出默认 new www.sxzhongrui.com({ state,mutations, actions, getters })

{{计数}}

const getters = { getterCount(state) { return (state.count += 10) } } Getter 非常简单。 到这里，如果你都明白了，那么你对vuex就没有压力了。 但是vuex官方给了我们一个更简单的使用vuex的方式，那就是{mapState, mapMutations, mapActions, mapGetters}只要理解了上面的基础知识，这些都不是小事，我们只是写方面。 就这么简单，这里我们使用es6的展开运算符。如果你不熟悉的话，可以看看阮一峰老师的这本书《Es6标准入门》。我读了，受益匪浅！ ​ 同理，getters和state也可以使用mapState、mapGetters 如果你懒的话，我们可以用数组代替对象，或者es6中的对象简写 像这样