初用vuex,項目中需要記錄一些狀態(tài)专挪,來判斷頁面是否為登錄狀態(tài)和頁面是否可被編輯茄猫,此時用到了vuex中的store來存儲一個狀態(tài)。
//首先 安裝vuex
npm install vuex --save
//新建一個store文件夾脆侮,并在里面創(chuàng)建一個index.js文件勇劣,并導(dǎo)入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
//id
skillId:'',
//技能狀態(tài)
checkStatus:''
}
})
export default store
這里記錄了兩個值一個是id一個是狀態(tài)值checkStatus,然后把創(chuàng)建的store在main.js里導(dǎo)入
import store from "./store"http://vuex
至此,我們可以在所需要的vue文件中為其賦值
this.$store.state.skillId = '需要記錄的id'
//技能狀態(tài)
this.$store.state.checkStatus = '需要記錄的狀態(tài)'
賦值后盆犁,就可以在需要用到這些id和狀態(tài)的vue文件中取值
'自己定義的變量名' = this.$store.state.checkStatus
現(xiàn)在篡九,skillId和checkStatus相當(dāng)于兩個全局變量谐岁,可以在需要的頁面獲取值和更改值。但有一個嚴(yán)重的問題就是榛臼,在我們刷新頁面的時候伊佃,vuex數(shù)據(jù)是重新初始化,無法獲取的沛善,導(dǎo)致出現(xiàn)了空值航揉。
但這不是自己想要的結(jié)果,所以百度了一圈(https://blog.csdn.net/guzhao593/article/details/81435342金刁,http://www.cnblogs.com/padding1015/p/9272809.html)帅涂,找到了解決辦法。
更改store文件下index文件state的定義
const store = new Vuex.Store({
state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
//id
skillId:'',
//技能狀態(tài)
checkStatus:''
}
})
以及在App.vue中添加
mounted() {
window.addEventListener('unload', this.saveState)
},
methods: {
saveState() {
sessionStorage.setItem('state', JSON.stringify(this.$store.state))
}
}
也就是說監(jiān)聽unload方法尤蛮,如果重載頁面就把state存入
sessionStorage媳友,然后在需要state的時候從sessionStorage中取值。