Vuex商店更新后，Vue Bootsrap组件不会呈现使用watch和nextTick

问题描述

在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，在这里我调用了一种更改Vuex商店中的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
    },

版本：

[email protected]
[email protected]"
[email protected]

解决方法

问题一定来自data（），我认为从中调用$ store是行不通的。 （即使在其中调用“ this”也是一个错误，但我不确定100％）

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

您可以进行计算：

 as.Date(gsub("T|Z"," ","2020-10-05T06:15:00Z"),format = "yyyy-MM-dd HH:mm:ss ")

这样，将curDocType绑定到v模型是正确的。

希望这可以解决您的问题