这篇文章继续学习 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
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于