如何在nuxt中的vuex action中获取持久化状态值?

时间:2021-04-19 07:17:21

标签: nuxt.js vuex persistent-storage

我正在尝试在我的通用 Nuxt 应用程序中使用 vuex-persistedstate。现在,我保持的状态值在刷新后在我的组件和页面中工作正常。当我在谷歌浏览器的 vue dev 中检查我的代码并检查状态时,我可以看到值在那里。但问题是,尽管该值被保留,但在我的 vuex 操作中,该值在刷新时丢失了。如何在操作中使用持久化值?

我在 nuxt.config.js 中的代码

plugins: [{ src: '~/plugins/persistedState.js', mode: client}] 

persistedState.js 中的代码

    import VuexPersistence from 'vuex-persist'
    
    export default ({ store }) => {
  const persist = new VuexPersistence({
    reducer: (state) => ({
      myvariable: state.myvariable
    }),
  }).plugin(store);
};

商店的 index.js

    export const state = () => ({
      myvariable: '',
    )}
    
    export const mutations ={
     setmyvariable(state, payload){
        state.myvariable=payload
      }
    }
    
    export const actions = {
    
    //this action is dispatched on loading my app to set some state values
    
async sendRequestToStartSession({commit}){
     commit('setmyvariable', 'This is persisted value')
    }
    
    //this action is being dispatched from other place and uses the state values
    //the value works fine till I refresh the page
    
stateValueAction(context, payload){
    .....
    console.log(console.log('myvariable:', this.state.myvariable)) //returning empty on refresh
    .....
    }
    
    }

0 个答案:

没有答案