vuex의 상태를 갱신하려면 어떻게 해야 합니까?vue.js 2

vuex의 상태를 갱신하려면 어떻게 해야 합니까?vue.js 2

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 warn] :watcher "function ( )에 대한 콜백 오류입니다. { 반환됩니다._data.$$state}: (에서 확인)

오류: [vuex] 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않습니다.

어떻게 하면 해결할 수 있을까요?

다른 구성요소에서 사용하는 값을 원하기 때문에 업데이트 상태를 원합니다.

vuex 저장소 설정에서 strict 모드를 사용하도록 설정했기 때문에 이 오류가 발생했을 수 있습니다.

그러나 이것은 좋은 관행이다.변환 내부를 제외하고 상태를 변경할 수 없습니다.

새로운 셋업 스토어를 사용하려면 , 다음과 같은 변환이 필요합니다.

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

주의: 필요할 수 있습니다.babel그리고.babel-preset-es2015확산 연산자를 활용하기 위해 설치:....

난 방금 그 문제의 해결책을 찾아냈어Vue.set(state.element, elementIndex, newElement);

언급URL : https://stackoverflow.com/questions/43338448/how-can-i-update-state-in-vuex-vue-js-2