这篇文章继续学习 Vuex。
参考： Vuex 官方文档 https://vuex.vuejs.org/zh/
上一篇文章的链接：Vue 学习(五)——补充 watch、computed 属性 http://www.honeybee.top/articles/2018/10/16/1539650950392.html
1. 什么是 Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通俗的来讲 Vuex 就是 Vue 配套的公共数据管理工具，可以把一些共享的数据保存到 Vuex 中，方便程序中的任何组件直接获取或修改数据。
2. 安装
NPM 方式：
npm install vuex --save
在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
3. Vuex 的基本使用
在学习阶段，这里直接使用了 html 页面引入 Vuex 的方式来演示，而不去创建复杂的模块化工程。
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body> <div id="app"> <input type="text" v-model="$store.state.count"> </div> <script> //1.新建一个 Vuex 实例，得到一个 数据仓储对象 var store = new Vuex.Store({ //state类似于 Vue中的data, 专门用来存储数据 state: { count: 0 }, }) var vm = new Vue({ el: '#app', data: {}, //2.把Vuex实例挂载到Vue实例中，下面为简写的 store:store store }); </script> </body> </html>
运行结果如下：
4. Mutations 属性
在上面的例子中作修改：
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body> <div id="app"> <input type="text" v-model="$store.state.count"> <input type="button" value="增加" @click="addCount()"> </div> <script> //1.新建一个 Vuex 实例，得到一个 数据仓储对象 var store = new Vuex.Store({ //state类似于 Vue中的data, 专门用来存储数据 state: { count: 0 }, //mutations类似于Vue中的methods, 用来操作store中的state值 //注意：在Vuex设计理念中，想要操作store中的state值，只能通过调用mutations中提供的方法 //因为实际开发中任何组件都可能有操作数据的方法，直接操作的话可能会导致数据的紊乱，发生错误无法快速定位 mutations: { //mutations中的函数参数列表中最多支持两个参数，第一个参数为：state状态，第二个是通过commit提交的参数； increment(state) { state.count++; } } }) var vm = new Vue({ el: '#app', data: {}, methods: { addCount() { //注意： 如果实例(组件)想要调用mutations中的方法，只能使用this.$store.commit('方法名') this.$store.commit('increment'); } }, //2.把Vuex实例挂载到Vue实例中，下面为简写的 store:store store }); </script> </body> </html>
运行结果如下：
5. Getters 属性
对上面的例子继续修改：
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body> <div id="app"> <!-- 改动count的获取方式为getters中的方法--> <input type="text" v-model="$store.getters.getCount"> <input type="button" value="增加" @click="addCount()"> </div> <script> //1.新建一个 Vuex 实例，得到一个 数据仓储对象 var store = new Vuex.Store({ //state类似于 Vue中的data, 专门用来存储数据 state: { count: 0 }, //mutations类似于Vue中的methods, 用来操作store中的state值 //注意：在Vuex设计理念中，想要操作store中的state值，只能通过调用mutations中提供的方法 //因为实际开发中任何组件都可能有操作数据的方法，直接操作的话可能会导致数据的紊乱，发生错误无法快速定位 mutations: { //mutations中的函数参数列表中最多支持两个参数，第一个参数为：state状态，第二个是通过commit提交的参数； increment(state) { state.count++; } }, //getters只负责对外提供Vuex中state的数据，不负责修改数据，如果要修改数据，使用mutations提供的方法 //注：getters和computed有点类似，只要state中的数据发生了变化，getters中引用到这个数据的方法也会重新计算 getters: { getCount: function(state) { return 'count值为:' + state.count; } } }) var vm = new Vue({ el: '#app', data: {}, methods: { addCount() { //注意： 如果实例(组件)想要调用mutations中的方法，只能使用this.$store.commit('方法名') this.$store.commit('increment'); } }, //2.把Vuex实例挂载到Vue实例中，下面为简写的 store:store store }); </script> </body> </html>
运行结果如下：
6. Vuex 总结
- state 中的数据不能直接作修改，如果要修改则必须要通过 mutations 提供的方法，调用方式为
this.$store.commit('方法的名称', 唯一的参数) - 直接获取 state 中的数据，
this.$store.state.*** - 如果 store 中 state 上的数据，在对外提供的时候，需要做一层包装，那么使用 getters 提供方法，调用方式为
this.$store.getters.***
好啦，到这里 Vue 及其生态圈的学习也告一段落，这些东西能够简单、快速了解 Vue 的内容，也能够满足一般开发的需求，当然在实际开发中还是要深入学习更多的内容。
还有关于 Vue 的 Http 请求没有写，这里贴上 Axios(一个基于 promise 的 HTTP 库)的中文文档 https://www.kancloud.cn/yunye/axios/234845
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于