VUE.JS 2：无法覆盖挂载钩子上的默认初始化数据（变量）答案

【问题标题】：VUE.JS 2 : Unable to overwrite default initialized data (variable) on mounted hookVUE.JS 2：无法覆盖挂载钩子上的默认初始化数据（变量）
【发布时间】：2017-10-14 03:40:07
【问题描述】：

场景

我有一个通用的模态组件，我使用全局总线（空 VUE 实例）与使用它的任何其他组件的模态组件进行通信。

问题

在 Modal.VUE 组件的 Mounted() 或 Created() 钩子中，我试图覆盖默认的初始化值，我需要确定哪些内容要在模态中显示。

console.log("Selected action is : " + actionName)

...提示正确的actionName，所以总线功能就在那里..

但是当像这样设置变量时：

this.modalComponent == actionName

.. 并像这样使用它：

<h2 v-if="modalComponent == 'refund'">Refundér</h2>
<h2 v-if="modalComponent == 'empty'">Not defined</h2>

.. modalComponent 值始终为空（如初始化）

脚本代码：

<script>

import bus from '../global/bus.js'

export default {
    name: "modal",
    data(){
        return {
            modalComponent: "empty"
        }
    },
    mounted() {
        bus.$on('on-action', function (actionName) {
            console.log("Selected action is : " + actionName)
            this.modalComponent == actionName
        })
    }
}

那么我在这里做错了什么？这是我初始化的方式吗？ mount() 或 created() 钩子有问题吗？或者..我设置新值的方式？

更新： 当 console.log(this) ：

【问题讨论】：

尝试使用this.$set('modelComponent', actionName);
你能在控制台记录下挂载的内部总线中'ths'的值是多少。$on
@GONG ：给我：未捕获的类型错误：无法在 Vue$3.set [as $set] 的字符串 'modelComponent' 上创建属性 'refund'
@user7814783 : 查看更新后的问题与 console.log(this) 的打印屏幕
@TerjeNygård 你在 bus.$on 中使用 double ==，分配一个值你应该使用 single =

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

你的this 不是 Vue 除了使用相等运算符而不是赋值运算符之外。试试

const self = this
bus.$on('on-action', function (actionName) {
    console.log("Selected action is : " + actionName)
    self.modalComponent = actionName
})

或

bus.$on('on-action', function (actionName) {
    console.log("Selected action is : " + actionName)
    this.modalComponent = actionName
}.bind(this))

或

bus.$on('on-action', actionName => this.modalComponent = actionName)

见How to access the correct this inside a callback?

【讨论】：

感谢您的回答 :).. 当在 html 中像 {{ modalComponent }} 一样使用它时，它仍然显示 modalComponent 的默认值。 Console.Log 显示一切正确。似乎 UI 没有更新为最新值？
值得一提的是，我第一次单击将发射发射到总线的按钮时，“bus.on('on-action') 没有被触发..（又名没有 console.log 结果...) ?
@TerjeNygård 你能举一个例子来展示这个错误，或者让代码在 github 之类的地方可用吗？
我会让它可用.. 等一下 :)

【解决方案2】：

好吧...我想出了一个更好的方法来使用状态来处理这个问题..

来源页面（使用）：

<a @click="toggleModal('refund')" class="btn btn-success btn-fixed-
  width">Refundér</a>
<a @click="toggleModal('move')" class="btn btn-success btn-fixed-
  width">Flytt</a>

源页面（显示模态组件的Vue代码）：

toggleModal: function(actionName){
            this.$store.dispatch('switchModalComponent', {
                modalComponent: actionName
            })
            this.showModal = true;
        }

Store.JS 代码：

export default new Vuex.Store({ 
    state: {
        visibleModalComponent: "empty"
    },
    getters: {
        visibleModalComponent: state => state.visibleModalComponent
    },
    actions: {
      switchModalComponent({ commit }, modalComponent){
        commit(types.VISIBLE_MODAL_COMPONENT, modalComponent)
    },
     mutations: {
         [types.VISIBLE_MODAL_COMPONENT] (state, modalComponent) {state.visibleModalComponent = modalComponent}
    }

Mutationtypes.JS

export const VISIBLE_MODAL_COMPONENT = "VISIBLE_MODAL_COMPONENT"

模态组件（根据源页面上下文切换内容）

<h1>{{ visibleModalComponent.modalComponent }}</h1>

<script>
    import { mapGetters } from "vuex"

    export default {
        name: "modal",
        computed: {
            ...mapGetters(["visibleModalComponent"])
        }
    }
</script>

这样...您无需担心新的 VUE 实例（总线），以及使用 emit 和 on 的问题（由于首次单击不工作问题，它的行为也不是 100% )。

【讨论】：