定义VUEX突变中的多变量

Question

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import userStore from './user/userStore.js';
import VuexPersist  from "vuex-persistedstate";
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'

const vuexLocalStorage = new VuexPersist({
key: 'vuex', // The key to store the state on in the storage provider.
storage: window.localStorage, // or window.sessionStorage or localForage
})
export default new Vuex.Store({
modules:{
userStore,
plugins: [vuexLocalStorage.plugin]
},
strict:debug
})

userStore.js

const state = {
authUser:null,
roles:null
}
const mutations  = {
SET_AUTH_USER(state,userObj){
state.authUser = userObj
},
SET_USER_ROLE(state,userRole){
state.roles = userRole      
}
}
const actions = {
setUserObject :({commit},userObj) => {
commit('SET_AUTH_USER',userObj)
},
setUserRoles :({commit},userRole) => {
commit('SET_USER_ROLE',userRole)
}
}
export default {
state, mutations, actions
}

边栏.vue

created(){
this.getRoles();
},
methods: {
getRoles(){
var _this = this
_this.roles_data = response.data
_this.$store.dispatch('setUserRoles',_this.roles_data)
_this.fetch_roles()
}
fetch_roles(){
console.log(this.$store.state.userStore.roles)
// OUTPUT
// (3) [{…}, {…}, {…}, __ob__: Observer]
console.log(this.$store.state.userStore)
// OUTPUT
// {__ob__: Observer}
// authUser: "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"
// roles: Array(3)      
}
}

Dashboard.vue

created(){
console.log(this.$store.state.userStore.roles)
// OUTPUT
// null
console.log(this.$store.state.userStore)
// OUTPUT
// {__ob__: Observer}
// authUser: "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"
// roles: Array(3)
}

嗨我正在开发vuex来存储用户角色访问权限。我正在存储两个变量1(authUser 2(角色authUser存储用户令牌，角色保存用户角色数组。当我从api获取角色时，我会将角色分派到_this$store.dispatch('setUserRoles'，_this.roles_data(。当我在侧边栏中控制台时，我会得到这样的输出

console.log(this.$store.state.userStore.roles)
(3) [{…}, {…}, {…}, __ob__: Observer]
console.log(this.$store.state.userStore)
{__ob__: Observer}
authUser: "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"
roles: Array(3)

但当我在创建的函数中的仪表板中控制台相同的东西时，它返回roles null

console.log(this.$store.state.userStore.roles)
null
console.log(this.$store.state.userStore)
{__ob__: Observer}
authUser: "NqStDm8ol3QGtoh0hzL7yhC3NP3HV0ktYKmYHI8TNiCjG4T4tLlv3pOEWFdA5CEh"
roles: Array(3)

我是不是错过了什么？？或者是错误

Answer 1

首先，您将plugin声明放在modules的内部，它必须在外部，处于同一级别。

您有：

export default new Vuex.Store({ modules:{
userStore,
plugins: [vuexLocalStorage.plugin] },

应该是：

export default new Vuex.Store({
modules:{
userStore
},
plugins: [vuexLocalStorage.plugin]
}

第二，您是否指定了要在vuex-persistedstate插件中持久化的存储模块路径？

我在任何地方都看不到这种声明，在这种情况下，我认为你应该如下所示：

const vuexLocalStorage = new VuexPersist({ 
paths: ['userStore'], //an array of the name of your store modules you want to persist
key: 'vuex', 
storage: window.localStorage 
})

也许有必要将您的模块设置为名称空间，例如：

const namespaced = true 
const state = {
authUser:null,
roles:null 
} 
const mutations  = {
SET_AUTH_USER(state,userObj){
state.authUser = userObj
},
SET_USER_ROLE(state,userRole){
state.roles = userRole      
}
}
const actions = {
setUserObject :({commit},userObj) => {
commit('SET_AUTH_USER',userObj)
},
setUserRoles :({commit},userRole) => {
commit('SET_USER_ROLE',userRole)
}
}
export default {
namespaced,
state, 
mutations, 
actions
}

此外，出于安全原因，我建议使用js cookie而不是localStorage，您的实现如下：

import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import userStore from '/path/to/userStore'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
plugins: [
createPersistedState({
paths:['userStore'], // YOU DON'T NEED TO SPECIFY KEY NAME, AS 'vuex' IS SET BY DEFAULT
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => { 
Cookies.set(
key, 
value, 
{ expires: new Date(new Date().getTime() + 20 * 60 * 1000) }) // Expiry time 60 minutes
},
removeItem: key => { 
Cookies.remove(key)
localStorage.removeItem('vuex')
}
}
}
)],
modules:{
userStore //REMEMBER TO NAMESPACE YOU MODULE!!
}
})

然后，您可以通过以下方式访问Cookie中的持久密钥：

JSON.parse(Cookies.get("vuex")).userStore //JSON parsed to get the values