vuex状态管理
在阅读本文章时，需要对 vue 有一定的熟悉了解，在不时很熟悉的情况下请到这里来哦
初识
vuex 又称vue状态管理。它是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
（听着属实有一点点蒙，说白了就是帮vue管理一些数据，使这些数据能在vue各组件之间共享）
也有一个最大的特点 它管理的数据也都是响应式的
可以先体验一下 涉及到的点后面都会说到
<!-- 可以使用，安装
npm install vuex --save
yarn add vuex
-->
<!-- ### 在此是体验，先用cdn进行使用 ### -->
<!-- cdn引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- cdn引入vuex，因vuex是服务于vue，所以必须先有vue再有vuex -->
<script src="https://unpkg.com/vuex"></script>
<div id="app">
<div>
<h2>演示vuex</h2>
<p>用 mutation 修改count的数据：{{muCount}}</p>
<button type="button" @click="muAdd">+</button>
<button type="button" @click="muReduce">-</button>
<p>获取 getter 返回的值：{{getResult}}</p>
<button type="button" @click="getResultFn">获取 getter 的结果</button>
<p>用 action 修改num的数据：{{acNum}}</p>
<button type="button" @click="actionSetNum">action修改 num 的值</button>
</div>
</div>
<script>
// vuex实例
const store = new Vuex.Store({
// 存放数据的地方
state:{
count:0,
num:10,
result:10,
},
// 在此是修改state数据的地方
mutations:{
/**
* state 是vuex存放数据的地方 即state
* data 是修改为的数据
*/
setCount(state,data){
state.count = data;
},
setNum(state,data){
state.num = data;
}
},
// 此属性类似于mutations不同在于actions中提交的是mutations中的东西，
// 而不是直接修改存放的数据，在此通常进行异步操作
actions:{
/**
* context 该参数是与 store 实例具有相同方法和属性的 context 对象
*/
actionSetNum(context){
// 使用commit提交mutations里的方法，修改state里面的数据
context.commit('setNum','action提价数据把 num 覆盖掉了');
}
},
// 此属性相当于vue实例中的 computed 计算属性 选项，
// 它只是对vuex中的 state 中存放的数据进行复杂操作，可以认为是 vuex 的计算属性
getters:{
// state 则是存放数据的地方 es6 写法
numAdd(state){
return state.result + state.count;
},
// es5
// numAdd:function (state){
// return state.count + state.num;
// },
},
})
//vue实例
new Vue({
el:'#app',
// 注入vuex es6写法
store,
// es5
// store:store,
data(){
return{
getResult:0,
}
},
computed:{
muCount(){
return this.$store.state.count;
},
acNum(){
return this.$store.state.num;
}
},
methods:{
muAdd(){
this.$store.commit('setCount',++this.$store.state.count);
},
muReduce(){
this.$store.commit('setCount',--this.$store.state.count);
},
// -----------
actionSetNum(){
this.$store.dispatch('actionSetNum');
},
getResultFn(){
this.getResult = this.$store.getters.numAdd;
}
},
mounted(){},
});
</script>
运行结果展示：
核心选项概念理解
再此会讲述 vuex 主要的四部分，即 state、mutations、actions、getters，上面代码也使用到过
1、state
state 相当于 vue 实例中的 data 选项，包含了Vuex.Store实例中存储的各个状态，说白了 就是一个存放数据的地方。
使用方式：
const store = new Vuex.Store({
state:{
count:123,
//...
},
})
在 vue 组件中使用 this.$store.state.count来获取state里面的值
2、mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
在这里面定义的是一组方法，只有这个属性才能改变Vuex.Store中的状态，只能是同步操作。
通过Vuex.Store实例中的commit方法是对该属性中指定修改方法进行提交修改
使用方式：
const store = new Vuex.Store({
state:{
count:123,
//...
},
mutations:{
/**
* state 是vuex存放数据的地方 即state
* data（Payload） 是修改为的数据
*/
setCount(state,data){
state.count = data;
},
//...
},
})
在 vue 组件中使用this.$store.commit(‘setCount’,456)来修改 state 中的 count
在获取 state 中的数据时常与 vue 中的 computed 计算属性进行搭配使用
在这里小伙伴可能有个疑问：
在获取 state 中的数据时为什么要与 computed 搭配使用呢？
解答：
这是因为data 中的内容只会在 created 钩子触发前初始化一次,这个时候如果data里面绑定的是vuex值类型数据，那么后面无论怎么修改vuex的state状态，data中对应的属性值是不会变化的,而 computed 则是通过依赖实现的，计算属性在它的相关依赖发生改变时会重新求值。
(简单来说就是 如果 state 中属性的值发生改变后，在 data 获取的不会响应式改变，而在 computed 中获取的则会改变，因为 computed 的特性之一是相关依赖的属性发生改变，就会重新执行)
3、actions
类似于mutations，不同在于可以在actions中提交mutations中的方法去修改。
也是一组方法，其中可以包含异步操作。
使用方式：
const store = new Vuex.Store({
state:{
count:123,
//...
},
mutations:{
/**
* state 是vuex存放数据的地方 即state
* data（Payload） 是修改为的数据
*/
setCount(state,data){
state.count = data;
},
//...
},
actions:{
/**
* context 该参数是与 Vuex.Store 实例具有相同方法和属性的 context 对象
*/
commSetCount(context){
context.commit('setCount',456)
//可以做异步操作
},
//...
}
})
在 vue 组件中使用this.$store.dispatch(‘commSetCount’)执行 actions 中的操作
4、getters
类似于 vue 中的计算属性，根据其他 getter 或 state 计算返回值.
getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
使用方式：
const store = new Vuex.Store({
state:{
count1:123,
count2:456,
//...
},
getters:{
/**
* state 是vuex存放数据的地方 即state
* getters 是其他getters方法作为第二个参数
*/
countAddition: (state, getters) => {
return state.count1 + state.count2;
},
//...
},
})
在 vue 组件中使用this.$store.getters.countAddition得到返回的结果
注意：除 actions，其它属性中，定义的方法都默认有个 state 方法用于访问 state 中定义的共享数据，而 actions 中有个 context 参数是指向上下文，相当于箭头函数中的this
仔细看完上面几个核心函数后，在仔细看下图：
相关辅助函数
当组件中需要获取许多 state 中的数据时，将这些状态与计算属性搭配使用会出现计算属性的重复和冗余，为解决 可以使用相关辅助函数进行生成相应计算属性。
注意：使用前提必须先引入对应函数
1、mapState
mapState 函数返回的是一个对象
为解决获取 state 代码出现重复和冗余的辅助函数
//首先要引入该函数
import { mapState } from 'vuex'
computed: mapState({
/*箭头函数可使代码更简练
state 是存放数据的地方
*/
count: state => state.stateName1,
// 传字符串参数 'stateName1' 等同于 `state => state.count`
computedName1: stateName1,
computedName2: function(state){
return state.stateName2;
},
})
上面这种方式有小伙伴会想到 vue的 data 中的数据用到计算属性怎么弄？
还有一种方法：
因为 mapState 函数返回的是一个对象，与展开运算符（…）一起使用，然后与计算属性原有属性进行混合使用
computed:{
//原有属性
computedName1(){}, //es6
computedName2:function(){}, //es5
//使用辅助函数
...mapState({
// 把 `this.computedName` 映射为 `this.$ store.state.stateName`
computedName:stateName,
})
}
2、mapMutations
为解决提交 mutations 代码出现重复和冗余的辅助函数
methods: {
//数组形式 可以提交多个
...mapMutations([
// 将 `this.mutationsName1()` 映射为 `this.$store.commit('mutationsName1')`
'mutationsName1',
// `this.mutationsName2(amount)` 映射为`this.$store.commit('mutationsName2', amount)`
'mutationsName2'
]),
// 展开返回的结果
...mapMutations({
methodName: 'mutationsName'
})
}
3、mapActions
为解决执行 actions 代码出现重复和冗余的辅助函数
methods: {
...mapActions([
// 将 `this.actionsName1()` 映射为 `this.$store.dispatch('actionsName1')`
'actionsName1',
// 将 `this.actionsName2(amount)` 映射为 `this.$store.dispatch('actionsName2', amount)`
'actionsName2'
]),
...mapActions({
// 将 `this.methodName()` 映射为 `this.$store.dispatch('actionsName')`
methodName: 'actionsName'
})
}
4、mapGetters
为解决获取 getters 代码出现重复和冗余的辅助函数
//数组方式：
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
// 数组方式
...mapGetters([
'getterName1',
'getterName2',
// ...
])
// 对象方式:
...mapGetters({
// 把 `this.computedName1` 映射为 `this.$store.getters.getterName1’`
computedName1: 'getterName1'
})
}
常用API
构造器 Vuex.Store
就是用来创建 vuex 实例的东西
import Vuex from 'vuex'
const store = new Vuex.Store({ ...options })
Vuex.Store 构造器选项
| 选项 | 类型 | 介绍 |
|---|---|---|
| state | Object / Function | 用来存放数据 |
| mutations | { [type: string]: Function } | 用来修改存放的数据的多组方法 ，必须是同步的 |
| actions | { [type: string]: Function } | 常用来提交 mutations 中的方法，可以是异步的 |
| getters | { [key: string]: Function } | 相当于 vue 计算属性，只是在 vuex 中充当计算属性 |
Vuex.Store 实例属性
| 属性 | 类型 | 介绍 |
|---|---|---|
| state | Object | 存放的数据（只读） |
| getters | Object | 获取 getters 中方法的返回值（只读） |
Vuex.Store 实例方法
| 方法 | 格式 | 介绍 |
|---|---|---|
| commit | commit(type: string [, payload?: any] , options?: Object) | 用于提交修改 state 中存放的值 |
| dispatch | dispatch(type: string [, payload?: any] , options?: Object): Promise< any > | 用来执行 actions 中的方法 |
阅读到这里相信对 vuex 有了一定的了解，建议在回到 初识 部分仔细阅读代码，动手敲敲，会对自己的理解有很大帮助！
到这里就结束了，后续还会更新vue全家桶相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！
5250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
