如何在 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>

app.store.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？

Answer 1

首先，确保在你的 Vue 实例中包含 store，如下所示：

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

另外，在计算属性中，不要直接访问存储（尽管它非常好），使用您创建的 getter。

现在，当您在 Vue 实例中注入 store 时，它​​会自动对您的所有子组件可用——这意味着您无需导入它，而只需在您的组件中像这样使用它：

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

您可以阅读有关主题here 的更多信息。