Блог

В приложении vue cli я не могу понять, как сделать повторный рендеринг объекта в компоненте, когда в хранилище Vuex происходят изменения, внесенные другим компонентом. В этом примере я меняю curDocType переменную, но значение b-form-select объекта остается прежним (изначально 0). Не уверен, что проблема в стороне Bootsrap или в Vue.

У меня это в одном component1.vue :

HTML

 <b-form-select v-model="curDocType" :options="options" class="mb-3" v-bind:style="{'background-color': activeColor}">
  

СКРИПТ

 data() {
        return {           
        options: [
                { value: 1, text: 'Sale' },
                { value: 5, text: 'CrMemo' },
                { value: 0, text: 'Quote' },
                { value: 4, text: 'CashIn' },                                  
            ],
        curDocType : this.$store.state.curDocType,
        activeColor : '#9EDE7D' //Red
        }
    },


watch:{
     curDocType(newval,oldval){            
            if (newval == 5) this.activeColor = '#D67373'
            else this.activeColor = '#9EDE7D'
            if (this.$store.state.curOrder == ""){
                this.$store.commit('setcurDocType', newval)
            }else{     
              this.$nextTick(() => {this.curDocType=this.$store.state.curDocType})
            }
         }
       }
  

Теперь у меня есть другой component2.vue , где я вызываю метод, который изменяет curDocType в хранилище Vuex:

 convertOrder(){
        if (this.$store.state.curOrder != ""){
            axios.post(this.ApiBaseUrl   'PosFunctions/QuoteToOrder',
                    JSON.stringify(this.$store.state.curOrder),
                    {headers: {"Content-Type": "application/json"}})            
            .then((response) => {  
                var res = response; 
                this.$store.commit('setcurDocType', 1) //!!IMPORTANT
                this.RecoverSale(response.data.return_value)
                                
            })
        }
    }
  

Store.js :

  setcurDocType (state, DocType) {
      state.curDocType = DocType
    },
  

Версии:

 bootstrap-vue@2.16.0
bootstrap@4.5.2"
vue@2.6.12
  

Проблема должна исходить из data(), я не думаю, что вызов $store из него будет работать. (даже вызов «this» в нем является ошибкой, но я не уверен на 100%)

Кроме того, вы не должны устанавливать состояние хранилища в v-model, поскольку состояние хранилища является только «получателем», а v-model — двусторонней привязкой (получатель установщик)

Вы могли бы выполнить вычисленное :

 curDocType : {
    get(){
        return this.$store.state.curDocType
    }
    set(value){
        this.$store.commit('setcurDocType', 1);
    }
}
  

При этом привязка curDocType к v-model выполняется правильно.

Надеюсь, это решит вашу проблему