1. 程式人生 > >vuex如何管理需要即時更新的全局變量

vuex如何管理需要即時更新的全局變量

.com 快速 問題 操作 imp 練習 spa save actions

自己在使用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方式來獲取或操作自己需要管理的數據

如果大家有更好的方法或見解希望跟互相交流

vuex如何管理需要即時更新的全局變量