Mon composant vue est comme ceci:
<template>
<div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="status" class="sr-only">Status</label>
<select class="form-control" v-model="selected" @change="filterByStatus()">
<option value="">All Status</option>
<option v-for="status in orderStatus" v-bind:value="status.id">{{ status.name }}</option>
</select>
</div>
</div>
</div>
...
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
...
data() {
return { selected: '' }
},
methods: {
filterByStatus: function() {
this.$store.state.status = this.selected
}
}
}
</script>
Ma commande de modules vuex est comme ceci:
import { set } from 'vue'
import order from '../../api/order'
import * as types from '../mutation-types'
const state = {
status: ''
}
const getters = {
...
}
const actions = {
...
}
const mutations = {
...
}
export default {
state,
getters,
actions,
mutations
}
J'utilise ceci this.$store.state.order.status = this.selected:, pour mettre à jour l'état lors de l'exécution, mais il existe une erreur comme celle-ci:
[Vue warn]: Erreur de rappel de l'observateur "function () {return this._data. $$ state}": (trouvé dans)
Erreur: [vuex] Ne mute pas l'état du magasin vuex en dehors des gestionnaires de mutation.
Comment puis-je le résoudre?
Je veux l'état de mise à jour, car je veux la valeur utilisée par un autre composant
Vous devez avoir reçu cette erreur en raison de l'activation du mode strict dans la configuration de votre boutique vuex.
Ceci, cependant, est une bonne pratique. Vous ne devez pas modifier l'état sauf à partir d'une mutation.
Donc, pour utiliser le nouveau magasin d'installation; ont une mutation comme:
const mutations = {
mutateOrderStatus: function (state, payload) {
state.order.status = payload
}
}
const actions = {
updateOrderStatusAction: function ({commit}, payload) {
commit('mutateOrderStatus', payload)
}
}
Maintenant, incluez-le dans votre composant comme:
...
methods: {
...mapActions([ // spread operator so that other methods can still be added.
'updateOrderStatusAction'
]),
filterByStatus: function() {
this.updateOrderStatusAction(this.selected)
}
}
Note: vous pourriez avoir besoin babelet babel-preset-es2015installé pour utiliser l' opérateur de diffusion: ....
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots