【应用场景】
简单来说就是状态管理,存放一些全局参数,供各个组件调用,并且这是响应式的。这里补充下,个人认为Vuex持久化很重要,不然这些参数存在内存中,一个页面刷新就回到解放前,那有什么用。
【本文主要几个内容】(本文所有例子都是基于Vue/cli 3.4的脚手架)
- state
- mutation
- action
- module
- Vuex持久化
state
[例子]
{{$store.state.age}}
{{count}}
{{countAlias}}
{{countAge}}
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
age: 1
},
mutations: {
increaseAge(state, num) {
state.age += num; //这里的state指向了前面的state,所以修改了这里就会导致前面的state发生了变化
}
},
actions: {
}
})
效果:
1.gif
getters
[应用场景]
getters更像一个过滤器,将原始state中的值处理过后再送给调用者。
可以通过以下3种形式访问
- 属性形式
- 函数形式
- mapGetters(和mapState一样)
看代码:
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name: 'wcx',
age: 12
},
mutations: {
increaseAge(state, obj) {
this.state.age = this.state.age + obj;
}
},
actions: {
},
getters: {
dealName: (state) => {//属性形式的写法
return 'getters' + state.name;
},
dealAge: (state) => (id) => { //函数形式对应的写法
if(state.age % 2 === 0) {
return false
}else {
return true
}
}
}
})
欢迎进入首页
{{$store.getters.dealName}}
{{dealAge(123)}}
Mutations
这是官网推荐的修改state的方式,虽然直接在子组件里修改state也可以生效。Mutations里面放一些方法,每个方法接受2个参数,第一个是state,第二个是一个对象,里面可以放多个需要的参数。记住Mutations里面指接受同步方法,异步要用Actions,例子可以看官网。
Actions
和 mutations类似,不同的是Actions是处理异步函数的,然后子组件里,mutations通过commit
来提交修改,而actions通过dispatch
来提交修改。看代码:
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
age: 12
},
mutations: {
increaseAge(state) {
state.age++;
}
},
actions: {
getAge(context, param) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('param', param)
context.commit('increaseAge');
resolve();
}, 1000)
});
}
}
})
home
test.gif
Module:
为了防止store过于臃肿,可以通过Module的方式分割模块,看代码:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
Vuex持久化
【应用场景】
之前在写项目的时候发现vuex是没有做持久化的,那我浏览器一个刷新,所有状态都被重置,这不shit了么?后来通过localstorage的方式解决,但是总感觉应该有现成的方法,不然每次手动控制,岂不是很麻烦。这里介绍下插件vuex-persistedstate
官网地址
接着之前的例子代码:
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedState' //引入插件
Vue.use(Vuex)
export default new Vuex.Store({
state: {
age: 12
},
plugins:[createPersistedState({//将插件传入vuex
storage: window.localStorage
})],
mutations: {
increaseAge(state) {
state.age++;
}
},
actions: {
getAge(context, param) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('param', param)
context.commit('increaseAge');
resolve();
}, 1000)
});
}
}
})
效果:
test.gif