Question

我有一个这样的 Vuex 商店。当使用 this.$store.dispatch("storeTest"); 从我的组件触发 storeTest 操作时，我需要使用这个奇怪的语法 store.store 来访问一个项目。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    loading: false,
    fileStr: "data.json",
  },
  actions: {
    storeTest(state) {
     //works
      console.log("state: ", state.state.fileStr);
     //fail
      console.log("state: ", state.fileStr);
    },
    },
  },
});

我希望我可以通过 state.item 访问一个状态。相反，我必须写 state.state.item。可能有什么问题？

Answer 1

这是因为动作接收的不是状态作为参数，而是上下文。您需要它来调度其他操作或提交。

actions: {
  async myAction ({ state, dispatch, commit }) {
    console.log(state.loading);
    await dispatch('anotherAction')
    commit('someCommit')
  }
}

上下文属性的完整列表 here。

Answer 2

动作函数的第一个参数不是state，而是context（参见docs）。

这个“上下文”对象有多种属性，其中之一是state。

这与第一个参数是 state 的突变不同。

Answer 3

由于@FitzFish 的改进和工作

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    loading: false,
    fileStr: "data.json",
  },
  actions: {
    storeTest(context) {
     //works
      console.log("state: ", context.state.fileStr);
    },
  },
});

Vuex 在奇怪的动作中访问状态

3 个答案: