Question

这是我在post.js中的store：

import axios from 'axios'
import createPersistedState from "vuex-persistedstate"

export default {
    namespaced: true,
    state: {
        sample_data: 'Welcome!!',
        logged_in: false,
    },
    getters: {
        getSampleData: state => state.sample_data
    },
    mutations: {

   },
    actions: {

    },

}

在我的组件中：

<template>
  <div class="home">
    <p>{{ sample_data }}</p>
    <p>{{ logged_in }}</p>

  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Home',
  components: {

  },
  data() {
    return {
      msg: 'Welcome'
    }
  },
  methods: {

  },
  computed: {
    ...mapState('post', ['sample_data', 'logged_in'])
  }
}
</script>

我已经在Chrome中安装了Vue扩展程序。现在，当我将sample_data中的DevTools > Vue > Vuex从“ welcome” 更改为“ welcome 2222” 时，它将准确地说出“ welcome 2222 “ 。现在，当我单击“刷新”时，页面会返回说“ welcome” ，但是在Vuex面板中它显示的是sample_data: welcome 2222。我尝试刷新Vue面板，但它仍会显示sample_data: welcome 2222，因此持久状态必须正常。为什么我的页面显示旧的“ welcome” 而不显示“ welcome 2222” ？

谢谢！

更新

我尝试过这样：

mutations: {
    setSampleData(state, payload) {
        state.sample_data = payload
    }
},
actions: {
    setSampleData({commit}, payload) {
        commit('setSampleData', payload)
    }
},

在我的组件中：

<button @click="setSampleData('Hello Hero')">Get Data</button>

现在，即使刷新页面，它也会将状态更改为“ Hello Hero”。它似乎正在工作。但是，再次在Vuex面板中，它仍然会显示类似“ welcome 2222”的字样。

如果我将Vuex面板中的数据更改为“ hi there”，则页面将显示“ hi there”。但是当我刷新时，它将再次显示“ Hello Hero”，并在Vuex面板中显示“ hi there”。似乎两者之间有问题？

更新2

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import post from './post'
import createPersistedState from "vuex-persistedstate"
import * as Cookies from 'js-cookie'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    post
  },
  plugins: [createPersistedState()],
})

Answer 1

看来您不符合包装文件中的要求：

可以在单独的文件中创建新的插件实例，但必须将其导入并添加到主Vuex文件中的插件对象中

存储数据和组件数据不同（Vuex +持久状态）

1 个答案: