Определить несколько переменных в мутации 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
}

Sidebar.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)

Но когда я утешаю то же самое в инструментальной панели в созданной функции, она возвращает role 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-cookies вместо 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