如何在Vue组件中使用Vuex？

Question

我有一个vuex示例项目:

app.vue:

<template>
    <div>{{message}}</div>
</template>

<script>
import store from "./app.store.js";

export default {
    computed: { message: () => store.message }
}
</script>

应用商店存储.js:

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

Vue.use(Vuex);

const state = { message: "Hello World" };
const getters = { message: state => state.message };
const store = new Vuex.Store({ state, getters });

export default store;

{{message}}占位符被替换为空字符串而不是"Hello World"。如何在Vue组件中使用Vuex？

- nagy.zsolt.hun

Answer 1

首先，确保在Vue实例中包含了store，例如：

new Vue({ el: '#app', store });

此外，在计算属性中，不要直接访问 store（尽管这样做是完全可以的），请使用您创建的 getter。

现在当您向 Vue 实例注入 store 时，它会自动可用于所有子组件 - 这意味着您不需要导入它，而只需在组件中像这样使用：

computed: { return this.$store.getters.message }

您可以在此了解更多相关主题。

- 8bit

---

将store对象传递给Vue构造函数可以使得“this.$store”变量在组件中可用。然而，我更喜欢使用箭头函数，因为其中不可用“this”引用 - 所以我在每个vue组件中导入store。这样，Vue构造函数中的store对象就是可选的。我的代码问题是缺少了“.getters”引用。 - nagy.zsolt.hun

哦天啊，@nagy.zsolt.hun，我在整个互联网上都在苦苦寻找为什么commit不作为this.$store的属性存在，然后我想起了你的评论，箭头函数不包括“this”！所以我使用了count：() => {而不是count（）{。你是最棒的！ - Nick Steele