【Vue】15 VueX
【什么是VueX？】
VueX是一个专门为Vue.js应用程序开发的状态管理模式，
采用集中式存储管理应用的所有组件状态，
以相应的规则保证按照一种可预测的方式发生改变。
即把多个组件的变量统一放到一个地方管理
在项目中安装Vuex
npm install vuex
新建store目录和一个index.js
并写入以下代码：
import Vue from 'vue'; import VueX from 'vuex'; Vue.use(VueX); const store = new VueX.Store({ state : { count : 0 }, mutations : { increment(state) { state.count++; }, decrement(state) { state.count--; } } }); export default store;
其次，我们要让所有的Vue组件，都能使用store，
就需要在main.js中引入，引入方式与router一样
import Vue from 'vue' import App from './App.vue' import router from "./router"; // ./router/index.js 因为是index.js，可以默认不写 import store from "./store"; Vue.config.productionTip = false new Vue({ render: h => h(App), router, store }).$mount('#app');
在任意一个Vue组件中插值引入：
<template> <div> <h2>样本的标题</h2> <p>样本的标签</p> <p>{{$store.state.count}}</p> </div> </template> <script> export default { name: "sample" } </script> <style scoped> </style>
可以看到这里已经完全取出来了
然后再编写两个按钮和对应的事件：
<template> <div> <h2>样本的标题</h2> <p>样本的标签</p> <p> <button @click="decrease">减少</button> {{$store.state.count}} <button @click="increase">增加</button> </p> </div> </template> <script> export default { name: "sample", methods : { decrease() { this.$store.commit("decrement"); }, increase() { this.$store.commit("increment"); } } } </script> <style scoped> </style>
查看效果：
然后再主页面也渲染这个变量：
可以发现，是一样的：
就是为了一些公共变量而存在的
【State】
Vuex提出使用单一状态树，（单一数据源），就是将一堆公共的数据放到一起去管理
state的意义类似Vue实例的data对象，所有的数据信息存放state中，但是访问不建议也像vue那样直接引用
【Gettter】
我们需要从state中获取一些经过改变后的数据，可以使用getter
store的index.js
import Vue from 'vue'; import VueX from 'vuex'; Vue.use(VueX); const store = new VueX.Store({ state : { count : 0, studentList : [ { id : 1, name : "张三", age : 23, gender : true }, { id : 2, name : "李四", age : 24, gender : true }, { id : 3, name : "王五", age : 25, gender : true }, { id : 4, name : "阿伟", age : 26, gender : true }, { id : 5, name : "杰哥", age : 27, gender : true }, ] }, mutations : { increment(state) { state.count++; }, decrement(state) { state.count--; } }, getters : { getStudentByAge(state) { return state.studentList.filter(e => e.age > 24); } } }); export default store;
在组件中可以通过this.$store.getters.xxx获取
<p> {{$store.getters.getStudentByAge}} </p>
效果：
【Mutations】
用于对state中的数据进行修改，或者是传值，类似vue实例的methods
调用mutations中的方法，需要这样：
this.$store.commit('方法名称',参数列表)
【Actions】
需要注意的是，我们不会在mutations进行异步操作：【使用规范】
但是在某些特定需求的情况下必须使用：比如ajax异步请求
这时候我们就可以使用actions处理：
作用就是为了代替mutations来完成这种功能
context参数，是和Store对象具有相同方法和属性的对象
即我们可以使用context.commit调用mutations
import Vue from 'vue'; import VueX from 'vuex'; Vue.use(VueX); const store = new VueX.Store({ state : { count : 0, studentList : [ { id : 1, name : "张三", age : 23, gender : true }, { id : 2, name : "李四", age : 24, gender : true }, { id : 3, name : "王五", age : 25, gender : true }, { id : 4, name : "阿伟", age : 26, gender : true }, { id : 5, name : "杰哥", age : 27, gender : true }, ] }, mutations : { increment(state) { state.count++; }, decrement(state) { state.count--; } }, getters : { getStudentByAge(state) { return state.studentList.filter(e => e.age > 24); } }, actions : { increa(context) { context.commit('increment'); } } }); export default store;
调用actions的方法需要使用dispatch分发
<template> <div> <h2>样本的标题</h2> <p>样本的标签</p> <p> <button @click="decrease">减少</button> {{$store.state.count}} <button @click="increase">增加</button></p> </div> </template> <script> export default { name: "sample", methods : { decrease() { this.$store.commit("decrement"); }, increase() { // this.$store.commit("increment"); this.$store.dispatch('increa'); } } } </script> <style scoped> </style>
其实对比发现，就是多一个action处理：
actions可用于异步操作，即可以使用Promise，
在异步操作中放入Promise，成功或者失败后，调用对应函数
import Vue from 'vue'; import VueX from 'vuex'; Vue.use(VueX); const store = new VueX.Store({ state : { count : 0, studentList : [ { id : 1, name : "张三", age : 23, gender : true }, { id : 2, name : "李四", age : 24, gender : true }, { id : 3, name : "王五", age : 25, gender : true }, { id : 4, name : "阿伟", age : 26, gender : true }, { id : 5, name : "杰哥", age : 27, gender : true }, ] }, mutations : { increment(state) { state.count++; }, decrement(state) { state.count--; } }, getters : { getStudentByAge(state) { return state.studentList.filter(e => e.age > 24); } }, actions : { increa(context) { context.commit('increment'); }, mp(context) { return new Promise(resolve => { setTimeout(() => { context.commit("decrement"); resolve(); }, 1000); }); } } }); export default store;
组件这里：
<template> <div> <h2>样本的标题</h2> <p>样本的标签</p> <p> <button @click="decrease">减少</button> {{$store.state.count}} <button @click="increase">增加</button></p> </div> </template> <script> export default { name: "sample", methods : { decrease() { // this.$store.commit("decrement"); this.$store.dispatch('mp').then(res => { alert("数据跟新完毕"); }); }, increase() { // this.$store.commit("increment"); this.$store.dispatch('increa'); } } } </script> <style scoped> </style>
每次点击减少按钮就会晚一秒执行，然后再弹窗警告：
【Modules】
模块，vuex使用了单一状态树，当我们的状态过多时，使用store管理可能臃肿，这时候可以按照模块区划分vuex的store数据
当然，store还是可以统一管理module的
每个module即一个小的vuex，都具备上面的那些属性【getters,state,actions . . .】
import Vue from 'vue'; import VueX from 'vuex'; Vue.use(VueX); const user = { state : { studentList : [ { id : 1, name : "张三", age : 23, gender : true }, { id : 2, name : "李四", age : 24, gender : true }, { id : 3, name : "王五", age : 25, gender : true }, { id : 4, name : "阿伟", age : 26, gender : true }, { id : 5, name : "杰哥", age : 27, gender : true }, ], token : "", name : '', header : '', }, getters : { getStudentByAge(state) { return state.studentList.filter(e => e.age > 24); } } } const baseData = { state : { count : 0, }, mutations : { increment(state) { state.count++; }, decrement(state) { state.count--; } }, actions : { increa(context) { context.commit('increment'); }, mp(context) { return new Promise(resolve => { setTimeout(() => { context.commit("decrement"); resolve(); }, 1000); }); } } } const store = new VueX.Store({ modules : { user, baseData } }); export default store;
组件中的调用也需要更改：
<p> {{$store.state.baseData.count}} </p> <p> {{$store.getters.getStudentByAge}} </p>
如果再index.js有太多的模块，可以抽取成文件，引入使用：
