如何在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实例中包含商店,如下所示:

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

此外,在计算属性中,不要直接访问商店(尽管它完全没问题),请使用您创建的getter.

现在,当您在Vue实例中注入商店时,它会自动供所有子组件使用 - 这意味着您无需导入它,而只需在组件中使用它:

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

您可以在此处详细了解该主题.