web-dev-qa-db-fra.com

comment utiliser vuex dans les composants vue?

J'ai un exemple de projet 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;

L'espace réservé {{message}} est remplacé par une chaîne vide au lieu de "Hello World". Comment utiliser vuex dans les composants vue?

vue.jsvuex
13
nagy.zsolt.hun

Tout d'abord, assurez-vous d'inclure le magasin dans votre instance Vue, comme dans:

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

De plus, dans la propriété calculée, n'accédez pas directement au magasin (bien qu'il soit parfaitement correct), utilisez le getter que vous avez créé.

Et maintenant, lorsque vous injectez le magasin dans l'instance Vue, il est automatiquement disponible pour tous vos composants enfants - ce qui signifie que vous n'avez pas besoin de l'importer, utilisez-le simplement comme ceci dans votre composant:

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

Vous pouvez en savoir plus sur le sujet ici .

9
8bit