web-dev-qa-db-ja.com

vueコンポーネントでvuexを使用するには？

私は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を使用するには？

vue.jsvuex
13
nagy.zsolt.hun

最初に、次のように、ストアを必ずVueインスタンスに含めてください。

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

また、計算されたプロパティで、ストアに直接アクセスしないでください（完全に正常ですが）、作成したゲッターを使用します。

Vueインスタンスにストアを挿入すると、すべての子コンポーネントで自動的に使用できるようになります。つまり、インポートする必要はなく、次のように使用するだけです。成分：

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

here のトピックについて詳しく読むことができます。

9
8bit