vuex如何管理需要即时更新的全局变量
自己在使用vue练习开发的时候遇到全局变量无法即时更新的问题,查了资料之后得出结论使用vuex能够快速解决该问题,但是看了好多人讲解vuex的教程自己跟着去做都没解决自己想要的,最后找到一个比较容易理解的拿出来分享给大家,也顺便给自己做笔记了。
1.首先安装vuex cnpm install vue --save
2.引入vuex import Vuex from 'vuex';
3.只需要复制粘贴过去即可(最重要的别忘了需要初始化的时候把store写进去)
new Vue({ el: '#app', router, store,//使用store components: { App }, template: '<App/>' })
//创建Store实例 const store = new Vuex.Store({ // 存储状态值 state: { count: 1, flag:true }, // 状态值的改变方法,操作状态值 // 提交mutations是更改Vuex状态的唯一方法 mutations: { increment (state) { state.flag = !state.flag; // 变更状态 state.count++ } }, // 在store中定义getters(可以认为是store的计算属性)。Getters接收state作为其第一个函数 getters: { done(state) { return state.count + 5; }, }, actions: { increment (context) { context.commit('increment') }, incrementAsync (context) { // 延时1秒 setTimeout(() => { context.commit('increment') }, 1000) } }
})
// 要改变状态值只能通过提交mutations来完成
4.通过$store.state.flag方式来获取或操作自己需要管理的数据
如果大家有更好的方法或见解希望互相交流