一.Vuex是什么?
Vuex是为应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。通俗的说就是将多个组件或者多个模块共用的状态(state)放在一个store(仓库)里面,并且这些状态是响应式的,其中一个组件将其修改(mutations)以后,其他组件能够在第一时间知道,此处指的修改不是直接修改仓库的状态,而是需要通过提交(commit) 修改.
Vuex核心:
State、Getter、Mutation、Action
1.State:主要包含各个组件的公共状态.
2.Getter:类似于计算属性,可以对Stat进行二次处理.
3.Mutation:用于存放修改State的方法.(只能是同步操作)
4.Action:用于存放修改State的异步操作方法. (异步操作)
二.Vuex使用
首先需要在main.js注册.
main.js
import store from './store'
new Vue({
el:'#app',
store,
render:h=>h(App),
})
在store文件夹下面新建index.js文件用于存放状态和操作方法.(本文未涉及分模块存放状态)
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
number: 0
},
getters: {
showNumber(state) {
return `当前最新的数值的10倍是:${
state.number*10}`
}
},
mutations: {
,
add(state, n) {
// n参数根据业务需要,可以没有
state.number += n
}
},
actions: {
addAsync(state, n) {
// n参数根据业务需要,可以没有
setTimeout(() => {
state.commit('add', n)
}, 1000)
}
}
})
State
State:单一状态树,存放公共状态,Vuex状态管理的数据源.
state: {
number: 0//存放公共状态state
},
其他模块的访问方式
第一种访问方式(直接在计算属性使用即可)
computed:{
number(){
this.$store.state.number
}
}
第二种访问方式(需要辅助函数,但是更方便)
import {
mapState } from 'vuex'
computed: {
...mapState(['number'])
}
this.number //就可以直接使用了
Getters
Getters:类似计算属性,对状态进行二次处理,getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算.
对应地方
getters: {
showNumber(state) {
return `当前最新的数值的10倍是:${
state.number*10}`
}
},
其他模块的访问方式
第一种访问方式:
computed: {
doneTodosCount () {
return this.$store.getters.showNumber
}
}
第二种访问方式
import {
mapGetters } from 'vuex'
...
computed: {
...mapGetters(['showNumber'])
}
this.showNumber //就可以直接使用了
...
Mutation
Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。也就是说，前面两个都是状态值本身，mutations才是改变状态的执行者。
注意：mutations只能是同步地更改状态。
mutations: {
,
add(state, n) {
// n参数根据业务需要,可以没有
state.number += n
}
},
其他模块的访问方式
第一种访问方式:
this.$store.commit('add',n)//直接调用
第二种访问方式:
import {
mapMutations } from 'vuex'
methods: {
...mapMutations(['add']),
this.add(n) 就可以直接使用了,不用参数可以不传参
}
规范的发起mutation的方式如下：
// 使用对象风格的提交方式
store.commit({
type: 'add',
amount: 10 //这是额外的参数
})
//相应的mutation定义的方法
mutations: {
add (state, payload) {
state.count += payload.amount
}
}
Actions
想要异步地更改状态，就需要使用action。action并不直接改变state，而是发起mutation。
如下代码:
actions: {
addAsync(state, n) {
// n参数根据业务需要,可以没有
setTimeout(() => {
state.commit('add', n)
}, 1000)
}
}
其他模块的访问方式
第一种访问方式:
this.$store.dispatch("addAsync",n)
第二种访问方式:
import {
mapActions } from 'vuex'
methods: {
...mapActions(['addAsync']),
this.addAsync(n) //就可以直接使用了,不用参数可以不传参
Action与Mutation的区别
1.Action 提交的是 mutation，而不是直接变更状态。
2.Action 可以包含任意异步操作，而Mutation只能且必须是同步操作。
三.总结
Vuex可以帮助我们管理共享状态,不过如果不是中大型项目的话,简单store模式就足够了,如果项目较大,就要考虑项目的嵌套逻辑和组件外部的状态管理了.