时间戳

首页 > 解决方案 > VueJS - 动态状态管理多个实例

vue.js - VueJS - 动态状态管理多个实例

问题描述

我正在创建一个应用程序，我有一个组件“消息”，它使用 astore从 JSON 文件（这最终将是一个数据库）中获取数据，该组件如下：

export default  {
   props: ['message'],

   mounted: function() {    
       this.$store.dispatch("FETCHMESSAGE", this.message);
   },

   computed: {
       title: function() {
          return this.$store.state.message;
       }
   }
}

我有以下突变：

FETCHMESSAGE: function (context, type)
{
     var data = json.type; // Get the data depending on the type passed in
     // COMMIT THE DATA INTO THE STORE 
}

我使用它如下：

<MessageApp message="welcome"></MessageApp>

这在大多数情况下都有效，并且会显示正确的消息。MessageApp问题是当我在同一页面上有多个被调用的实例时。它们都显示被调用的（最后一条消息的）相同的消息。例如

<MessageApp message="welcome"></MessageApp>
<MessageApp message="goodbye"></MessageApp>

他们每个人都会显示goodbye信息。我知道为什么会发生这种情况，但是是否有可能有多个实例以store使这种情况不会发生？

标签： vue.jsvue-component

解决方案

正如文档所说，Vuex 是“应用程序中所有组件的集中存储” 。

因此，想象一下您有一个（或多个）变量，您可以使用和更改所有组件。

此外，当您想从状态中获取属性时，建议使用getters。

我不明白你想做什么，但如果你愿意，你可以拥有多个状态、getter、突变和动作，并将它们用作商店中的模块（阅读更多）。请参阅以下来自Vuex 文档的示例：

const moduleA = {
  state: { title: '' },
  mutations: { changeTitle(state, payload) { state.title = payload } },
  actions: { changeTitle({commit}, payload) { commit('changeTitle', payload) } },
  getters: { getTitle(state) { return state.title } }
}

const moduleB = {
  state: { title: '' },
  mutations: { changeTitle(state, payload) { state.title = payload } },
  actions: { changeTitle({commit}, payload) { commit('changeTitle', payload) } },
  getters: { getTitle(state) { return state.title } }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

推荐阅读