Question

我正在创建一个应用程序，我有一个组件“Message”，它使用store从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实例时。它们都显示被调用的相同消息（最后一条消息）。 E.g。

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

他们每个都会显示goodbye消息。我知道为什么会发生这种情况，但有可能有store的多个实例，这样就不会发生这种情况吗？

Answer 1

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

所以想象一下，你有一个变量（或许多），你可以使用它并从你的所有组件中更改。

此外，当您想要从州获取属性时，建议使用getters。

我无法理解您想要做什么，但如果您愿意，您可以拥有多个状态，getter，突变和操作，并将它们用作商店read more中的模块。请参阅下面的示例 vuex docs ：

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

VueJS - 动态状态管理多个实例

1 个答案: