概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。当多个组件需要数据共享的时候,我们就可以使用Vuex。
其实Vuex就是为了实现多组件数据共享,从而建立一个叫store的数据管理库,将需要共享的数据存放在里面,在需要的地方可以取出来作为初始数据,也可以在组件内通过dispatch或者提交commit方法来改变该原始数据状态,从而实现的data的共享。
Vuex的工作流程图:
Vuex可以看做一个仓库store,有State,Mutations,Actions组成。
state属性:state提供唯一的公共数据源,所有共享的数据都要统一放到store的state中进行存储。
mutations:唯一能改变state的状态就是通过提交mutations来改变,this.$store.commit()
actions: 异步的mutations,可以通过dispatch来分发从而改变state
getters:类似于共享计算属性,可以通过this.$store.getters来获取存放在state里面的数据
module:模块化工具
安装
直接安装会安装最新版本(4.x)
npm i vuex
安装指定版本:
npm i vuex@3.6.2
安装完成,创建store目录
- store目录下放仓库
- 仓库中放状态(共享数据)
目录结构如下:
1、 State
Vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过
this.$store.state
来获取我们定义的数据。
//引入
import Vue from "vue";
import Vuex from "vuex";
//Vuex是插件,插件都需要use
Vue.use(Vuex);
const state = {
number: 0
}
export default new Vuex.Store({
state,
});
在页面中通过this.$store.state.number
即可获取到当前的值。
2、Getter
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数:
//引入
import Vue from "vue";
import Vuex from "vuex";
//Vuex是插件,插件都需要use
Vue.use(Vuex);
const state = {
number: 0
}
const getters = {
getNumber(state) {
return state.number + 1
}
}
export default new Vuex.Store({
state,
getters,
});
在页面你可以用两种方式取到getters里面的值:
1、通过属性访问
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值 如: this.$store.getters.getNumber
Getter 也可以接受其他 getter 作为第二个参数:
const state = {
number: 1
}
const getters = {
getNumber(state) {
return state.number + 1 // 2
},
getDoubNUmber(state, getters) {
return state.number + getters.getNumber // 3
}
}
注意: getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。
2、通过方法访问
你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
注意: getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果 this.$store.getters.filterNumber(3)
3、Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方, 并且它会接受 state 作为第一个参数 , 提交载荷(payload) 作为额外的参数 ,并且在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且使记录的 mutation 会更易读:
//可以这样写:
const mutations = {
increment(state, n) {
state.number += n
}
}
//但不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:
this.$store.commit('increment', 1)
//也可以这样写:
const mutations = {
increment(state, payload) {
state.number += payload.count
}
}
//然后:
//使用 this.$store.commit('increment', {count: 1}) 提交,
// 或者另一种方式是直接使用包含 type 属性的对象进行提交:
this.$store.commit({
type: 'increment',
count: 1
})
特别说明:在 Vuex 中,mutation 都是同步任务:为了处理异步操作,让我们来看一看 Action。
4、 Action
Action 类似于 mutation,不同在于:
4.1 Action 提交的是 mutation,而不是直接变更状态。
4.2 Action 可以包含任意异步操作。
虽然在页面中通过提交commit是可以达到修改store中状态值的目的,但是官方并不建议我们这样做,而是让我们去提交一个action,在action中提交mutation再去修改状态值。
const mutations = {
increment(state) {
state.number += 1
}
}
const actions = {
addNumber(context){
context.commit('increment')
}
}
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters;
addNumber( {commit} ){
commit('increment')
}
//以上这种写法等同于:
addNumber(context){
context.commit('increment')
}
Action 通过 store.dispatch 方法触发:this.$store.dispatch('addNumber')
同mutation 一样你也可以在action的时候传递参数
const mutations = {
increment(state, number) {
state.number += number
}
}
const actions = {
addNumber(context, number){
context.commit('increment', number)
}
//或者
addNumber( {commit}, number){
commit('increment', number)
}
}
触发方法: this.$store.dispatch('addNumber', 10)
关于在action 处理异步操作可以看下面这个例子:
const actions = {
getData({commit}) {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
commit('getList')
resolve()
}, 1000)
})
}
}
//然后再
this.$store.dispatch('getData').then(() => {
// ...
})
//完整实例
import Vue from "vue";
import Vuex from "vuex";
import { resolve, reject } from "any-promise";
Vue.use(Vuex);
const state = {
number: 1,
list: [1, 2, 3, 4, 5]
}
const getters = {
getNumber(state) {
return state.number + 1 // 2
},
getDoubNumber(state, getters) {
return state.number + getters.getNumber // 3
},
filterNumber:(state)=>(num)=> {
return state.list.find(item=> item%num === 0)
}
}
const mutations = {
increment(state, n) {
state.number += n
},
getList(state) {
state.list = state.list.forEach((item)=> item*2)
}
}
const actions = {
addNumber( {commit} , n){
commit('increment', n)
},
getData({commit}) {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
commit('getList')
resolve()
}, 1000)
})
}
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
});
//关于 Vuex中mapState、mapGetters、mapMutations、mapActions的用法
//要用 首先得引入:
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
//其实就是Vuex 内置的辅助函数,方便我们获取store里面的数据和方法
computed: {
...mapState([
'number'
])
}
// 使用对象展开运算符将 getter 混入 computed 对象中
computed: {
...mapGetters([
'getNumber',
'getDoubNumber',
// ...
])
}
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
methods: {
...mapActions([
'addNumber', // 将 `this.addNumber()` 映射为 `this.$store.dispatch('addNumber')`
// `mapActions` 也支持载荷:
'addNumber' // 将 `this.addNumber(amount)` 映射为 `this.$store.dispatch('addNumber', amount)`
]),
...mapActions({
requestData: 'getData' // 将 `this.requestData()` 映射为 `this.$store.dispatch('getData')`
})
}
以上是对Vuex实现状态管理的一个整个过程的理解,参考官方文档。