如何在vuex中更新状态? vue.js 2

时间:2017-04-11 06:38:05

标签: vue.js vuejs2 vue-component vuex

我的vue组件是这样的:

<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>

我的模块订单vuex是这样的:

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
}

我使用这个:this.$store.state.order.status = this.selected,在执行时更新状态,但是存在这样的错误:

  

[Vue警告]:观察者回调错误&#34; function(){return   this._data。$$ state}&#34; :(找到)

     

错误:[vuex]不要在变异之外改变vuex存储状态   处理程序。

我该如何解决?

我想要更新状态,因为我想要组件使用的另一个值

2 个答案:

答案 0 :(得分:5)

由于您在vuex商店设置中启用strict mode,因此您一定收到此错误。

然而,这是一个很好的做法。除变异内外,您不得修改状态。

所以要使用新设置的商店;有一个突变:

const mutations = {
   mutateOrderStatus: function (state, payload) {
      state.order.status = payload
   }
}

const actions = {
   updateOrderStatusAction: function ({commit}, payload) {
      commit('mutateOrderStatus', payload)
   }
}

现在将其包含在您的组件中,如:

...
methods: {
  ...mapActions([ // spread operator so that other methods can still be added.
    'updateOrderStatusAction'
  ]),
  filterByStatus: function() {
    this.updateOrderStatusAction(this.selected)
  }
}

注意:您可能需要安装babelbabel-preset-es2015才能使用点差运算符:...

答案 1 :(得分:0)

我刚刚找到了解决该问题的方法, Vue.set(state.element, elementIndex, newElement);