如何在vue组件中使用vuex?
how to use vuex in vue components?
我有一个 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 实例中,如:
new Vue({ el: '#app', store });
此外,在计算 属性 中,不要直接访问商店(尽管它完全没问题),使用您创建的 getter。
现在,当您将商店注入 Vue 实例时,它会自动对您的所有子组件可用——这意味着您不需要导入它,而只需在您的组件中像这样使用它:
computed: { return this.$store.getters.message }
您可以阅读有关该主题的更多信息 here。
我有一个 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 实例中,如:
new Vue({ el: '#app', store });
此外,在计算 属性 中,不要直接访问商店(尽管它完全没问题),使用您创建的 getter。
现在,当您将商店注入 Vue 实例时,它会自动对您的所有子组件可用——这意味着您不需要导入它,而只需在您的组件中像这样使用它:
computed: { return this.$store.getters.message }
您可以阅读有关该主题的更多信息 here。