Question

我有要在不同场景中填充和更新的数据。在这些情况下，我需要填充“href”和“href2” 每当我尝试按照下面的代码中所写的方式进行填充时，我都会得到

未捕获的类型错误：无法读取未定义的属性“getter” -（尝试从 getter 中引用）
从兄弟 Vuex 状态数据引用时同样如此未捕获的类型错误：无法读取未定义的属性 'locationId'

这是来自我的 Vuex 商店的示例片段。

注意：我尝试做的这个参考/调用是在我的 Vuex 商店中。

我需要帮助了解如何在 Vuex Store 中正确引用这些数据。提前致谢。

export default new Vuex.Store({
  state: {
    defaultLocationId: "/...",
    updatedLocationFromAction: "",
    navData: [
      ...,
      {
        title: "Location",
        icon: "fa fa-map-marker",
        href: "/locations/" + this.defaultLocationId,
        href2: "/locations/" + this.getters.anotherLocation,
      },
      ...,
    ],
  },
  getters: {
    anotherLocation(state) {
      return state.updatedLocationFromAction;
    },
  },
});

Answer 1

Vuex getter/mutations/actions 是 pure 函数 - 没有像 Vue 组件中的 this 并且所有信息仅通过参数传递。您应该从状态中删除 href 和 href2，并将它们转换为 getter 函数。

Answer 2

如果你想改变状态，你需要使用mutation并使用getter来检索。这是 codepen 中 vuex 的一个很好的工作示例。看看：

https://codepen.io/brokyo/pen/rGRZxe

mutations: {
    UPDATE_DATA (state, payload) { // your location change
      state.person = payload
    }
  }

如何访问同级 Vuex 状态属性和 getter

2 个答案: