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?

8bit · Accepted Answer · 2017-11-04 23:25:14Z

14

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.

answered Nov 4, 2017 at 23:25

8bit

5975 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nagy.zsolt.hun Over a year ago

Passing the store object to the Vue constructor makes the "this.$store" variable available in components. However, I prefer using arrow functions, where the "this" reference is not available - so I import the store in each vue component. The store object in the Vue constructor is optional this way. The issue with my code was the missing .getters reference.

Nick Steele Over a year ago

Oh my gosh @nagy.zsolt.hun, I have been banging my head all over the internet trying to find out why commit doesn't exist as a property of this.$store then I remembered after your comment the arrow function doesn't include "this"! and I used count: () => { instead of count () { You're the best!

Collectives™ on Stack Overflow

how to use vuex in vue components?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related