最近小用了一下vuex來進行狀態(tài)管理野宜。
需求
login之后，得到當前用戶的id窿克，然后再其他頁面拿著這個id去進行其他請求
我的做法
在我的store里面是這樣寫的：
import * as types from '../mutation-types'
const state = {
userId: ‘‘’’
}
const getters = {
userId: state => state.userId
}
const mutations = {
[types.SET_USER_ID] (state, id) {
state.userId = id
}
}
const actions = {
setUserId: ({commit}, id) => commit(types.SET_USER_ID, id)
}
export default {
state,
getters,
actions,
mutations
}
mutaion-type.js里面
// login
export const SET_USER_ID = 'SET_USER_ID'
在頁面上
html
<div class="item pointer" @click="toNew(userId)">
<img class="icon-item" src="/static/image/setting.svg">アカウント設(shè)定
</div>
js
methods: {
toNew (id) {
this.$router.push({name: 'UserDetail', query: {userId: id}}) // 我需要跳轉(zhuǎn)的頁面
}},
computed: {
...mapGetters({
userId: 'userId'
})}
這時候有個問題了氯质，id是取到，但是呢刀闷，我一刷新頁面熊泵，數(shù)據(jù)就完全丟了。
google 了一下才發(fā)現(xiàn)我對vuex有點誤解甸昏，以為它可以跨頁面存儲數(shù)據(jù)顽分。
其實vuex解決的是跨組建的數(shù)據(jù)存儲和共用問題，不是跨頁面
這個是重點Ｊ┟邸卒蘸！
所以如果要解決這個跨組建又跨頁面的傳遞數(shù)據(jù)的話，需要借助外部儲存翻默，如localStorage或者sessionStorage來儲存缸沃。根據(jù)自己的需求選擇啦。
其實很簡單修械，在取到id的時候趾牧，把id先存到內(nèi)存里，然后id的初始值從存儲里面取肯污。
代碼如下：
const state = {
userId: window.localStorage.getItem('userId') //這里寫初始值
}
const getters = {
userId: state => state.userId
}
const mutations = {
[types.SET_USER_ID] (state, id) {
state.userId = id
window.localStorage.setItem('userId', id) // 在mutation里面取數(shù)據(jù)的時候就先去set一次
}
}
就是這么的簡單翘单。只加了2行代碼。
