之前写项目的时候发现自己对Vuex还不是那么熟练,又重新翻看了一次笔记!
Vuex
1、官方定义
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
说得直白点,vuex就是vue.js中管理数据状态的一个库,通过创建一个集中的数据存储,供程序中所有组件访问。
一个数据只要放在了vuex中,当前项目所有的组件都可以直接访问这个数据。
vuex有以下常用的几个核心属性概念:
- State
- Getters
- Mutations
- Actions
- Modules
具体用法我们稍后揭晓。
2、实际场景
普通的父传子和子传父,或是兄弟组件之间的互传值,都是两个组件之间的数据连接,但如果数据需要多组件共享,并且数据量庞大,那么就不适宜用中央事件总线来解决。此时,我们需要一个更加强大的,能够维护庞大数据的东西,它就是vuex,我们称之为:状态管理。
3、什么时候用Vuex
是不是学了就必须要在项目中使用呢?来看官网的回答:
很显然,如果你的项目比较简单,建议还是别强行使用vuex了。
另外,值得注意的点:vuex会随着页面刷新或关闭,将所有数据恢复至最初始的状态,所以它并不能替代localStorage。
4、安装Vuex
如果你的项目是较为大型的,那么建议在创建项目时直接选择安装vuex,如果创建时并未选择安装,请参考:《官网vuex安装》。
5、State
vuex中的state类似于data,用于存放数据,只不过这个数据是所有组件公用的。
我们来实现一个计数功能,但咱们把数据存放到vuex中的state,这里是专门用来存放组件共享的数据的。来看一下怎么实现:
首先,在 store/index.js
中:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 0 // 定义了一个num
}
})
然后在组件中:
<template>
<div>
<h3>{{$store.state.num}}</h3>
</div>
</template>
如此这般,我们获取到了state中的数据:
但在html中写这么长一串,始终有点难以阅读,因此,可以在computed中获取这个值,再传入html中:
computed: {
num(){
return this.$store.state.num
}
}
// 标签中
<h3>{{num}}</h3>
那么能否在data中存储这个数据呢?比如这样:
data() {
return {
num: this.$store.state.num
};
},
答案是可以的,但不太建议。因为data中的数据可以修改,但通常唯一能够修改state的方式是通过vuex中的mutations,所以此处我们了解一下即可。
6、Getters
vuex中的getters类似于computed计算属性,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
store/index.js
中:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 2
},
getters: {
// 这里的参数state可以让我们快速获取到仓库中的数据
doubleNum(state) {
return state.num * 2;
}
}
})
组件中:
<template>
<div>
<h3>{{num}}</h3>
</div>
</template>
<script>
export default {
computed: {
num(){
return this.$store.getters.doubleNum
}
}
};
</script>
7、Mutations
官网指出:
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
OK!那我们来修改一下这个num:
store/index.js
中(这里暂时先把getters去掉,避免大家学习混乱):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 2
},
mutations: {
// payload专业名称为“载荷”,其实就是个参数
addNum(state, payload) {
state.num += payload;
}
}
})
组件中:
<template>
<div>
<h3>{{num}}</h3>
<button @click="btnClick">累加2</button>
</div>
</template>
<script>
export default {
computed: {
num(){
return this.$store.state.num
}
},
methods: {
btnClick(){
// 使用commit来触发事件,第二个参数是要传递给payload的数据
this.$store.commit('addNum', 2)
}
}
};
</script>
来看看效果:
有一个必须注意的点,Mutations中不允许出现异步操作,它必须是一个同步函数,来看官网的解释:
我们来亲自尝试一下:
mutations: {
addNum(state, payload) {
// 这里给mutations添加定时器,也相当于是异步操作
setTimeout(() => {
state.num += payload;
}, 1000)
}
},
8、Actions
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 2
},
mutations: {
addNum(state, payload) {
state.num += payload;
}
},
actions: {
// context是一个对象,包含了commit和state
AsyncAddNum(context,payload) {
setTimeout(() => {
context.commit('addNum', payload)
}, 1000)
}
}
})
组件中:
<template>
<div>
<h3>{{num}}</h3>
<button @click="btnClick">累加2</button>
</div>
</template>
<script>
export default {
computed: {
num(){
return this.$store.state.num
}
},
methods: {
btnClick(){
// dispatch是分发到意思,其实也是触发Actions中的方法
this.$store.dispatch('AsyncAddNum', 2)
}
}
};
</script>
当然,上面actions中的写法有点累赘,我们还可以改写:
AsyncAddNum({ commit },payload) {
setTimeout(() => {
commit('addNum', payload)
}, 1000)
}
// 如果你还想获取state中的值,可以这样:
AsyncAddNum({ commit,state },payload) {
console.log(state.num); // 2
setTimeout(() => {
commit('addNum', payload)
}, 1000)
}
那么,既然actions中可以拿到state的值,能否直接改这个值,而不触发mutations呢?答案是可以的,但…还是devtool的问题,devtool并未更改值,因此,我们还是需要借助mutations来实现值的修改。
9、辅助函数
获取单个数据或触发某个方法比较容易,我们直接拿到和触发就行,但如果要获取的数据和触发的方法很多个,我们就比较麻烦了,这时候我们需要借用辅助函数。比如,我们刚刚只写了累加,现在再补充一个递减。然后来看看辅助函数怎么用。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 2,
title: '标题'
},
getters: {
doubleNum(state) {
return state.num * 1;
}
},
mutations: {
addNum(state, payload) {
state.num += payload;
},
cutNum(state, payload) {
state.num -= payload;
}
},
actions: {
AsyncAddNum({ commit },payload) {
setTimeout(() => {
commit('addNum', payload)
}, 300)
},
AsyncCutNum({ commit }, payload) {
setTimeout(() => {
commit('cutNum', payload)
}, 300)
}
}
})
此时,要拿到num和title的话,我们可以在组件中:
<template>
<div>
<h2>{{title}}</h2>
<h3>{{num}}</h3>
</div>
</template>
<script>
// 引入辅助函数mapState
import {mapState} from 'vuex'
export default {
// 在computed中引用
computed: {
...mapState(['title', 'num'])
}
};
</script>
如果打算从getters中取出num:
<h3>{{doubleNum}}</h3>
<script>
import {mapState, mapGetters} from 'vuex'
export default {
computed: {
...mapState(['title']),
...mapGetters(['doubleNum'])
}
};
</script>
如果打算把mutations和actions中的方法引入:
<template>
<div>
<h2>{{title}}</h2>
<h3>{{doubleNum}}</h3>
<button @click="addNum(2)">累加2</button>
<button @click="AsyncCutNum(2)">递减2</button>
</div>
</template>
<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
methods: {
// 这里负责引入,我们把引入后的事件直接写在标签上,顺便把参数也带上
...mapMutations(['addNum']),
...mapActions(['AsyncCutNum'])
}
</script>
如果你必须把点击事件写在methods中,而不是标签上的话,你也可以这样:
<template>
<div>
<button @click="btnClick1">累加2</button>
<button @click="btnClick2">递减2</button>
</div>
</template>
<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
export default {
methods: {
...mapMutations(['addNum']),
...mapActions(['AsyncCutNum']),
btnClick1(){
// 直接通过this.xxx来调用辅助函数引入的事件
this.addNum(2)
},
btnClick2(){
this.AsyncCutNum(2)
}
}
};
</script>
10、Module
假设我们把累加单独抽出来作为一个模块,在store下新建一个 add/index.js
文件:
export default {
namespaced: true, // 命名空间,为true时,可以在store中把当前模块文件夹名称(add),当作模块名使用
state: {
num: 2
},
getters: {
doubleNum(state) {
return state.num * 1;
}
},
mutations: {
addNum(state, payload) {
state.num += payload;
}
},
actions: {
AsyncAddNum({ commit }, payload) {
setTimeout(() => {
commit('addNum', payload)
}, 300)
}
}
}
把有关累加的所有内容,都移动至本文件。再到原来仓库index.js中的modules添加:
import add from './add'
export default new Vuex.Store({
...,
modules: {
add
}
})
在组件中使用时,稍微有些变化:
...mapState({
'title': 'title',
'num1': 'num1',
'num': state => state.add.num // module中state值的获取方法和getters等不太一样,需要写函数形式
}),
...mapGetters({
'doubleNum': 'add/doubleNum'
})
...mapMutations({
'addNum': 'add/addNum'
})
11、拆分写法
实际上我们可以把state、getter、mutation、action和module都抽离出来,这样可以让store文件看着更加简洁。我们来将 store/index.js
进行拆分:
state.js
:
export default {
num1: 0,
title: '标题'
}
mutations.js
:
export default {
cutNum(state, payload) {
state.num1 -= payload;
}
}
actions.js
:
export default {
AsyncCutNum({ commit }, payload) {
setTimeout(() => {
commit('cutNum', payload)
}, 300)
}
}
modules.js
:
import add from './add'
export default {
add
}
最后,在 store/index.js
中:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
modules
})