vueX的使用
使用vueX的目的与优点:
vueX是一个公共状态的管理仓库,便于对多个组件文件都需要使用的公共数据状态进行统一管理;
vueX使用方法:
1.安装vueX插件;创建一个编写vueX的store.js文件,在文件中引入vue和vueX,vue.used(vueX);将store.js的文件引入到主文件main.js中,并挂在入vue根实例中;
2.暴露vueX实例:
export default new Vuex.Store({
// 用来存放公共的数据状态变量
state:{
count:0,
isShow:true
},
//实时监测state值的变化(最新状态),功能类似于computed的实时监测
getters:{
getCount(state){ //承载变化的count值;
return state.count
}
},
//修改state里的变量值,只能同步的修改state里的变量值
mutations:{
addCount(state,num){ //必须传入state作为函数的第一个参数,第二个参数是同过commit("addCount",1)调用时传入的参数;
state.count=state.count+num;
}
},
//异步的修改state中的数据变量
actions:{
getAddCount(context,num){ //context与store实例具有相同的属性和方法;
context.commit("addCount",num);
}
}
})
3.在组件中获取、调用vueX中的状态变量和方法:
//在模板中使用也要添加this,这点和在模板中使用date中的数据不用带this不一样
//获取state中的数据变量;
<div>{{this.$store.state.count}}</div>
//获取getters中的数据变量:
<div>{{this.$store.getters.getCount}}</div>
//调用mutations中的函数修改state中的数据变量:
this.$store.commit("addCount",1);
//调用actions中的函数异步修改state中的数据变量:
this.$store.dispatch("getAddCount",1);
4.vueX的简短的调用方式:辅助函数mapState、mapGetters、mapActions
computed:{
...mapState({
count1:state=>state.count
}),
...mapGetters([
"getCount"
])
}
<div>{{count1}}</div>
<div>{{getCount}}</div>
vueX与localStorage的关系:
当浏览器刷新的时候,vueX中的数据会恢复到初始的状态,而localStorage 的值不会因刷新而改变;
本篇博客整理自:https://www.cnblogs.com/mica/p/10757965.html