刷新页面后Vuex persistedState不起作用

Question

我使用 npm install --save vuex-persistedstate 安装了持久状态。

然后我像这样设置我的 Vuex store.js 文件：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {},
  actions: {},
  getters: {},
  plugins: [createPersistedState()]
})

..在另一个组件中，我将值传递给 store.title：

this.$store.state.title = this.input

而且它有效。

但在我刷新页面 (F5) 后，this.input 不再存储在this.$store.state.title 中，它破坏了我的网站功能。

我做错了什么？

编辑：我得到了真正的香草风格：

第一：

this.$store.state.title = this.input
localStorage.setItem('title', this.$store.state.title)

然后：

mounted () {
    this.$store.state.title = localStorage.getItem('title')
  }

还是想知道，为什么 Vuex 插件不起作用:(

Answer 1

你能试试下面的代码吗

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {},
  actions: {},
  getters: {},
  plugins: [createPersistedState({
     key: 'keyname',
     storage: window.localStorage         
  })]
})

在“createPersistedState”中，您可以将路径以及 'paths: ['accessRights']' 设置为另一个属性。如果您不提供路径，那么整个状态将是持久性

Answer 2

我正在使用#vuex 存储模块，这对我的#vue #vuex #laravel 应用程序使用#vuex-persistedstate 持久存储状态有用。更多，如果你不使用 HTTPS，那么请保持安全 false。

import createPersistedState from 'vuex-persistedstate';
   import Cookies from 'js-cookie';
   Vue.use(Vuex);
   export default new Vuex.Store({
     strict:true,
   modules:{
    party,
    contract
    },
   plugins: [createPersistedState(
    {
        paths:['party.selectedParty','contract.contracts', 
   'contract.partyId', 
   'contract.partyContracts',
        'contract.selectedContract',

         ],
        storage: {
            getItem: key => Cookies.get(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, 
         secure: false }),
            removeItem: key => Cookies.remove(key)
          },

    }
       )],
   });

Answer 3

由于未知原因，有时它没有更新 cookie 中的状态。最简单的解决方案是通过执行以下操作将存储更改为本地存储：

      createPersistedState({
                key: 'somekey',
                storage: window.localStorage,
        // getState: (key) => Cookies.getJSON(key),
        // setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
      })

Answer 4

在我的例子中，这个扩展也有同样的问题，但是，我意识到问题不是源于我对 Vuex 的误用。我将状态值更改为this.$storage.state.VARIABLENAME。那是错的。当我重新阅读 Vuex 文档时，我意识到我应该通过 mutations 访问状态值。当我这样做时，扩展程序正常工作。

您应该通过这种方式修改状态值：

context.commit("SET_VARIABLENAME","value")

当你在 Vuex 存储中发生变化时，情况应该如下所示：

mutations: {
   
    SET_VARIABLENAME(state,status){
      state.MYVARIABLE= status
    },

在Vuex的状态块中：

state: {
    MYVARIABLE: null,
}

Answer 5

看起来只有在完成commit 调用时：

index.js`：

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState()],
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});

new Vue({
  el: "#app",
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    assign() {
      store.state.count = 4;
    },
    increment() {
      store.commit("increment");
    },
    decrement() {
      store.commit("decrement");
    }
  }
});

index.html

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
  <p>
    <button @click="assign">Assign 4</button>
  </p>
  <small>
    Check out your localStorage to see the updates.
  </small>
</div>

package.json

{
  "name": "vuex-persistedstate",
  "version": "1.0.0",
  "description": "Basic example of the vuex-persistedstate plugin",
  "keywords": ["vue", "vuex", "vuex-persistedstate"],
  "main": "index.js",
  "dependencies": {
    "vue": "2.5.22",
    "vuex": "3.1.0",
    "vuex-persistedstate": "2.5.4"
  }
}

https://codesandbox.io/embed/vuex-persistedstate-fhb4o?fontsize=14&hidenavigation=1&theme=dark