写给新手同学的vuex快速上手指北小结
本文介绍了写给新手同学的vuex快速上手指北小结，分享给大家，具体如下
引入
//store.js
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
conststore=newVuex.Store({
state:{...},
mutations:{...},
actions:{...}
})
exportdefaultstore
//main.js
...
importstorefrom'./store'
Vue.prototype.$store=store
constapp=newVue({
store,...
})
...
//test.vue使用时：
import{mapState,mapMutations}from'vuex'
State篇
state更新实时渲染是基于==computed==这个计算属性的,直接赋给data只能赋值初始值，不会随着state改变实时渲染
exportdefault{
data(){
return{
name:this.$store.state.name,
};
},
}
{{name}}exportdefault{ computed:{ name(){ returnthis.$store.state.name; } }, }
注意：data中的变量如果和computed中的变量重名,data优先，注意命名
获取多个state值，写多个函数return,很繁琐，所以有==mapState==辅助函数
exportdefault{
computed:{
token(){
returnthis.$store.state.token;
}，
name(){
returnthis.$store.state.name;
}
},
}
import{mapState}from'vuex'
exportdefault{
computed:mapState([
'token'，
'name'
])
}
我们有局部计算，怎么和mapState一起用？
import{mapState}from'vuex'
exportdefault{
computed:{
getTime(){
return123;
},
...mapState([
'token'，
'name'
])
}
}
我们为它起个别名
xiaokeai,dahuilang是我们取的别名 token,name是state的值 {{xiaokeai}}
我们要state和data发生点什么
假如token的值123; balabala的值就是123皮卡皮 {{balabala}}
取个对象值怎么破？
{{daSon}} {{xiaoSon}}
这种方式取对象写到业务里不直观,也不共用,下节==Getter==有更优的方案
Getter篇
Getter是针对state的【对象】值提前做一些处理，以便用的时候直接提取
可以this.$store.getters.xxx使用,也可以使用mapGetters辅助函数，==辅助函数注意：==和state一样，注入在computed中
importVuefrom'vue';
importVuexfrom'vuex';
Vue.use(Vuex);
conststore=newVuex.Store({
state:{
obj:{
yeye:{
baba:{
daSon:"老大",
xiaoSon:"老二"
}
}
}
},
getters:{
getson:state=>{
returnstate.obj.yeye.baba;
}
}
})
exportdefaultstore
{{getson}}
Mutation篇
操作：this.$store.commit("名字","值");
importVuefrom'vue';
importVuexfrom'vuex';
Vue.use(Vuex);
conststore=newVuex.Store({
state:{
token:"vuex的token",
},
mutations:{
setToken(state,val){
state.token=val;
}
}
})
exportdefaultstore
mapMutations辅助函数，和state一样，可以别名，==注意：==辅助函数注入在methods中
methods:{
...mapMutations([
'setToken'
])
}
this.setToken(100);//token修改为100
Mutation必须是同步函数，不要误解这句话，以为异步不能用，异步可以用在里面，视图的渲染，取值都没有问题，问题在于：调试的时候，一些浏览器调试插件不能正确监听state。所以方便调试，尽量将异步写入action中
Action篇
注意action的参数不是state,而是context，context里面包含commit,state。基本操作：this.$store.dispatch("函数名","值")
conststore=newVuex.Store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
},
actions:{
increment(context){
context.commit('increment')
}
}
})
import{mapActions}from'vuex'
exportdefault{
methods:{
...mapActions([
"increment"
])
}
}
this.increment(123);
module篇
module目的将store按功能拆分成多个文件，利于维护管理，module分为2种情况，1.是有命名空间，2.是没有命名空间
没有命名空间：action、mutation和getter是注册在全局的，所以要注意，方法函数不要设置同名了，如果同名了会都执行。
stete例外是局部。
importVuefrom'vue';
importVuexfrom'vuex';
importmoduleAfrom"./modules/cat.js";
Vue.use(Vuex);
conststore=newVuex.Store({
state:{
token:"vuex的token",
},
modules:{
moduleA
}
})
exportdefaultstore;
exportdefault{
//namespaced:true,
state:{
cat:"我是cat",
},
mutations:{
setCat(state,val){
state.cat=val;
}
},
actions:{
},
getters:{
}
};
无命名空间取值
this.$store.state.moduleA.cat
或者
...mapState({
cat:state=>state.moduleA.cat,
}),
不可以(state是局部，不可以这么取)：
...mapState([
"cat"
]),
无命名空间改变值
和原来一样，因为方法是注册在全局的
this.$store.commit("setCat",666);
或者
...mapMutations([
"setCat"
])
有命名空间：state,action、mutation和getter是局部的，模块间命名互相不冲突，可以重名。
namespaced设置为true,即可开启
exportdefault{
namespaced:true,
state:{
cat:"我是cat",
}
}
有命名空间取值
this.$store.state.moduleA.cat
或者
...mapState("moduleA",[
"cat"
])
有命名空间改变值
...mapMutations("moduleA",[
"setCat"
])
this.setCat(888);
或者：
this.$store.commit("moduleA/setCat",666);
最后plugins
vuex页面刷新会丢失数据，用vuex-persistedstate插件可解决
importcreatePersistedStatefrom"vuex-persistedstate";
conststore=newVuex.Store({
state:{},
mutations:{},
actions:{},
getters:{},
modules:{},
plugins:[
createPersistedState({
storage:window.sessionStorage
})
]
})
exportdefaultstore
到此这篇关于写给新手同学的vuex快速上手指北小结的文章就介绍到这了,更多相关vuex快速上手内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！