一、vuex核心属性
state
定义:数据仓库,存储所有的共享数据 ,相当于vue组件里的data,是一个单一状态树
使用:
1.在组件中使用(store->index.js)
export default new VueX.Store({
state:{
age:12,
isAdult:"未成年",
isAllowMarry:false
}
});
2.组件里获取:this.$store.state.属性名。
computed:{
getAge(){return $store.state.age}}
isAdult(){return $store.state.isAdult}
isAllowMarry(){return $store.state.isAllowMarry?"可以结婚了":"不要着急,再等等"}
}
Getter
定义:在state的基础上派生的数据, 相当于vue组件里 computed
组件里获取:{$store.getters.ageChina}
export default new VueX.Store({
state:{
age:12,
isAdult:"未成年",
isAllowMarry:false
},
getters:{
ageChina:state=>{
let shi = parseInt(state.age/10); //1
let ge = state.age%10;//2
let str = "";
switch(shi){
case 1:str='一';break;
case 2:str='二';break;
}
str+='十'
switch(ge){
case 1:str+='一';break;
case 2:str+='二';break;
case 3:str+='三';break;
case 4:str+='四';break;
case 5:str+='五';break;
}
return str+'岁';
}
},
});
Mutation
定义:修改state的数据时,用mutation,这与跟踪状态有关系。
强烈建议,在vuex中,使用mutation改变state中的值。可以在vuex对象中使用严格模式来检
测:const store = new Vuex.Store({ strict: true })
修改:
export default new VueX.Store({
state:{
age:12,
isAdult:"未成年",
isAllowMarry:false
},
getters:{
ageChina:state=>{
let shi = parseInt(state.age/10); //1
let ge = state.age%10;//2
let str = "";
switch(shi){
case 1:str='一';break;
case 2:str='二';break;
}
str+='十'
switch(ge){
case 1:str+='一';break;
case 2:str+='二';break;
case 3:str+='三';break;
case 4:str+='四';break;
case 5:str+='五';break;
}
return str+'岁';
}
},
// mutations:是跟踪状态。这里面只能有同步代码,这是必须的。
mutations:{
// incAge(state,num){
// state.age+=num;
//state:就是store对象里的state,不用程序员传入
//payload:就是形参,叫作载荷
incAge(state,payload){
state.age+=payload.num;
if(state.age>=18){
state.isAdult = "已成年";
}else{
state.isAdult = "未成年";
}
if(state.age>=22){
state.isAllowMarry = true;
}else{
state.isAllowMarry = false;
}
}
},
…………………………………………
});
提交mutation:
//组件里提交
this.$store.commit('incAge',num);
//action提交
incAge(context,num){
context.commit('incAge',num);
}
Action
定义:解决mutation里只能有同步代码的问题,action里可以有异步代码
使用:
export default new VueX.Store({
state:{
age:12,
isAdult:"未成年",
isAllowMarry:false
},
getters:{
ageChina:state=>{
let shi = parseInt(state.age/10); //1
let ge = state.age%10;//2
let str = "";
switch(shi){
case 1:str='一';break;
case 2:str='二';break;
}
str+='十'
switch(ge){
case 1:str+='一';break;
case 2:str+='二';break;
case 3:str+='三';break;
case 4:str+='四';break;
case 5:str+='五';break;
}
return str+'岁';
}
},
// mutations:是跟踪状态。这里面只能有同步代码,这是必须的。
mutations:{
// incAge(state,num){
// state.age+=num;
incAge(state,payload){
state.age+=payload.num;
if(state.age>=18){
state.isAdult = "已成年";
}else{
state.isAdult = "未成年";
}
if(state.age>=22){
state.isAllowMarry = true;
}else{
state.isAllowMarry = false;
}
}
},
// 如果出现异步操作,就需要使用action,action不是必须的。
actions:{
// incAge(context,num){
// context.commit('incAge',num);
// }
// incAge(context,payload){
// context.commit('incAge',payload);
// }
//context:是store对象
incAge(context,payload){
// context.commit('incAge',payload);
context.commit(payload);
}
}
});
Action与mutation的异同:
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
(
在代码的角度上,action是来提交mutation的
在用途(意义)上:区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用
devtools 追踪状态变化。 vuex 真正限制你的只有 mutation 必须是同步的这一点。当然
actions可以包含任何异步操作,如果程序员自己想处理异步操作,也可以不使用actions。
)
Modules
引入:当项目比较大时,所有的全局数据存放在state里,会非常混乱,怎么办?使用module,把数据分门别类的进行处理,即:模块化。
定义:每个模块是一个独立的store。然后由总体的store引入所有的分模块store。
两个模块分别管理不同类型的数据:
./src/store/moduleA.js
export default {
state: {count:1},
mutations: { ... },
actions: {
incCount(context){
console.log("moduleA的action");
setTimeout(()=>{
context.commit("incCount");
},2000);
}
},
getters: { ... }
}
./src/store/moduleB.js
export default {
state: {count:2},
mutations: { ... },
actions: {
incCount(context){
console.log("moduleB的action");
setTimeout(()=>{
context.commit("incCount");
},2000);
}
},
getters: { ... }
}
在总的store里包含所有的模块:
./src/store/index.js
import Vue from "vue";
import vueX from "vuex";
import moduleA from "./moduleA";
import moduleB from "./moduleB";
Vue.use(vueX);
export default new vueX.Store({
modules:{
moduleA:moduleA,
moduleB:moduleB
}
//简写:
modules:{
moduleA,moduleB
}
});
组件里使用数据时,多加个模块名即可
$store.state.moduleA.count // -> moduleA 的状态
$store.state.moduleB.count // -> moduleB 的状态
组件里派发action(或者提交mutation)时,如果,直接写action(mutation)的名字,那么就会找到所有同名的action(mutation)。
//在组件内容,派发action
this.$store.dispatch({
type:"incCount"
});
那么就会,派发给moduleA和moduleB里的incCount。即:moduleA和moduleB里的incCount
都被执行了。如果不希望这样,那就用命名空间
模块里的命名空间(namespaced:true)
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的
——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true
的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及
mutation 都会自动根据模块注册的路径调整命名。
1.模块定义时,加上namespaced:true
export default {
namespaced:true,
state:{
count:1
},
mutations:{
……………………
},
actions:{
incCount(context){
console.log("moduleA的action");
setTimeout(()=>{
context.commit("incCount");
},2000);
}
}
}
2.组件里派发action时,加上模块名
this.$store.dispatch('moduleA/incCount');
二、vuex辅助函数
1、vuex的辅助函数有:mapState、mapGetters、mapMutations、mapActions
2、vuex辅助函数的使用