Vuex Store 更新后 Vue Bootstrap 组件不渲染。使用 watch 和 nextTick答案

【问题标题】：Vue Bootsrap component does not render after Vuex Store Update. using watch and nextTickVuex Store 更新后 Vue Bootstrap 组件不渲染。使用 watch 和 nextTick
【发布时间】：2021-01-22 10:08:54
【问题描述】：

在 vue cli 应用程序中，当另一个组件对 Vuex 存储进行更改时，我无法弄清楚如何使组件中的对象重新呈现。在此示例中，我更改了 curDocTypevariable，但 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，我在其中调用了一个方法来更改 Vuex Store 中的 curDocType：

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

【问题讨论】：

标签： vue.js bootstrap-4 vuex bootstrap-vue

【解决方案1】：

问题必须来自 data()，我认为从它调用 $store 不会起作用。（即使在其中调用“this”也是一个错误，但我不是 100% 确定）

此外，您不应将存储状态设置为 v-model，因为存储状态只是“getter”，而 v-model 是双向绑定（getter + setter）

你可以做一个计算：

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

这样，将 curDocType 绑定到 v-model 是正确的。

希望这能解决您的问题

【讨论】：