Store Refresh Problem

Refresh the page, and the store’s value is gone.
https://www.npmjs.com/package/vuex-persistedstate try to apply this.

vuex_member.js:

import createPersistedState from 'vuex-persistedstate'
export default {
     state: {
        count: 0
    },
    getters: {},
    plugins: [createPersistedState()],
    mutations: {
         increment(state, data){
            state.userGroupid = data
        }
    }
}

TemplateDetailView.vue:

<template>
..................
</template>
<script>
   export default {
   .....................
      computed: {
           userinfo() {
                return this.$store.state.member.userInfo;
            },
            userGroupid() {
                return this.$store.state.member.userGroupid;
            }
      },
      methods: {
            init() {
                    this.$store.commit('increment', this.userinfo.ug_id)
                       console.log("this.count33333333>>>>>>>>>>>", this.userGroupid)
            }
      }
   }
</script>

Refresh will remove this.userGroupid value…
applying vuex-persistedstate correctly?

Where is userGroupid being removed from exactly? From localStorage or from the component?

As an aside, you can optimize your code in TemplateDetailView.vue by using mapState:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      userInfo: state => state.member.userInfo,
      userGroupid: state => state.member.userGroupid
    })
  }
}

It is being removed from the component.

Ok. Is vuex_member.js your default store for the whole app, or is that a Vuex module?
(also, I edited my comment above since I had a typo in it)

If you refresh the page after making a modification, the price will continue to fall…

vuex-persistedstate
should be in the global index js… not in the individual module.

vuex-persistedstate lets you select path to save for name spaced modules.

So F5 / refresh you wont lose your info

As per docs…main store…not modules.

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
     paths: ['members', 'myFavs', ' notFavs', ] // these ones you want to save on refresh / F5 what not
 )],
})

Thank the people who answered me.
Resolved by adding index.js

No problem,

Just mark question as solved. Others might down the line have same issues so they know hey this worked for him kind of thing

Help each other out ::slight_smile: