vue 구성 요소에서 vuex를 사용하는 방법?

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 인스턴스에 스토어를 포함시키십시오.

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

또한 계산된 속성에서 스토어에 직접 액세스하지 마십시오(완전히 정상이지만). 생성한 getter를 사용하십시오.

이제 Vue 인스턴스에서 스토어를 주입하면 모든 자식 구성 요소에서 자동으로 사용할 수 있게 된다. 즉, 가져올 필요 없이 구성 요소에서 이렇게 사용하십시오.

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

너는 여기서 주제에 대해 더 많이 읽을 수 있다.

참조URL: https://stackoverflow.com/questions/47116461/how-to-use-vuex-in-vue-components