CODEWITHSUNDEEP
vue.jsvuex
nagy.zsolt.hun
nagy.zsolt.hun

Reputation: 6694

how to use vuex in vue components?

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?

Upvotes: 15

Views: 14578

Answers (1)

8bit
8bit

Reputation: 597

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.

Upvotes: 14

Related Questions