如何在组件之间传递状态？答案

【问题标题】：How to pass state between components?如何在组件之间传递状态？
【发布时间】：2018-06-06 10:15:19
【问题描述】：

我有一个名为“item-detail”的组件，上面有一个“item”道具，如下所示：

<item-detail v-ref="itemDetail" v-if="showItemDetail" v-on:clicked="showItemDetail = false"></item-detail>

然后我有一个像这样的项目视图组件：

<item-view v-on:click="onItemClick(this)" title="head" :item="equipment.head"></item-view>

我正在努力做到这一点，以便当 item-view click 事件触发时，它将视图“item”道具传递给 item-detail 组件。所以我的 onItemClick 看起来像这样：

onItemClick: function(item) {
         this.$refs.itemDetail.item = item;
         appState.showItemDetail = true;
     }

我无法从文档中看到如何在 v-on:click 属性中获取项目视图的句柄。 “this”始终等同于 onItemClick 方法中的 Vue 应用实例，“item”也设置为 Vue 应用实例。

基本上用例是“当点击item view时，将它的'item'属性值传递给item-detail组件并显示item-detail组件。”。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

经过交谈后，我提出使用Vuex 更适合将逻辑向上传递，这可能会导致项目生命周期后期出现大量扩展问题。

https://github.com/LiamDotPro/VuexStoreExample

此示例展示了如何使用商店在组件之间轻松传递逻辑，而无需直接关系或链接。

store

/* eslint-disable space-before-function-paren */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  titleText: "hmm.."
}

const actions = {
  changeHomeText: ({commit}, context) => {
    commit('UPDATE_TEXT', context)
  }
}

const mutations = {
  UPDATE_TEXT(state, text) {
    state.titleText = text
  }
}

const getters = {}

export default new Vuex.Store({
  strict: true,
  state,
  getters,
  actions,
  mutations
})

app

<template>
  <div id="app">
    <router-view/>
    <div>
      <h1>{{getTitle}}</h1>
    </div>
  </div>


</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: '',
      }
    },
    computed: {
      getTitle: function () {
        return this.$store.state.titleText;
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

Inner component

<template>
  <div class="innerTile">
    <h1>Inner Tile</h1>
    <button @click="ChangeTileText()">inner tile button..</button>
  </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        msg: '',
      }
    },
    methods: {
      ChangeTileText: function () {
        this.$store.dispatch("changeHomeText", "Hi from inner tile..");
      }
    }
  }
</script>

<style scoped>
</style>

【讨论】：