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全家桶相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!