how to use vuex in vue components?

Question

I have a vuex example project:

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;

The {{message}} placeholder is replaced with empty string instead of "Hello World". How to use vuex in vue components?

Answer 1

First, make sure to include the store in your Vue instance, as in:

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

Also, in the computed property, don't access the store directly (although it is perfectly fine), use the getter you created.

And now when you inject the store in the Vue instance, it is automatically available to all of your child components - meaning you don't need to import it, rather just use it like this in your component:

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

You can read more on the topic here.