robinvdvleuten / vuex-persistedstate

💾 Persist and rehydrate your Vuex state between page reloads.
https://npm.im/vuex-persistedstate
MIT License
5.76k stars 375 forks source link

[vuex] state field "app" was overridden by a module with the same name at "app" #410

Closed qqjay2017 closed 3 years ago

qqjay2017 commented 3 years ago

dep version

"vuex": "^4.0.1",
"vuex-module-decorators": "^1.0.1",
"vuex-persistedstate": "^4.0.0-beta.3"

1. define module with vuex-module-decorators

const NAME = 'app'
@Module({ dynamic: true, namespaced: true, store, name: NAME })
export default class MyModule extends VuexModule {
    sidebar = {
      opened: true
    }

    size:Size = 'small';
    @Mutation
    toggleSidebar ():void {
      this.sidebar.opened = !this.sidebar.opened
    }

    @Mutation
    setSize (size:Size = 'small'):void {
      this.size = size
    }
}
export const appStore = getModule<MyModule>(MyModule)

2. use plugin in store root

const myPlugin = createPersistedState({
  storage: window.localStorage,
  key: 'vuex_app',
  paths: ['app.sidebar.opened'],
  overwrite: true
})

const store:Store<any> = createStore({
  plugins: [
    myPlugin
  ]

})

export default store

3.1 when change store data,can change storege data,but if you refresh page(f5),store data dont use storage data

4.1 debug resource code , merge(store.state, savedState ) return storage data(is right),but store.replaceState dont replace data, and chrome console output waring [vuex] state field "app" was overridden by a module with the same name at "app"

5.1 project repository https://github.com/qqjay2017/v3-admin

qqjay2017 commented 3 years ago

i have uninstall vuex-module-decorators and dont use it . all is ok ~~ thx