CODEWITHSUNDEEP
vue.jsvue-component
Martin Blore
Martin Blore

Reputation: 2195

How to pass state between components?

I have a component called "item-detail" that has a "item" prop on it, like so:

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

Then I have an item view component like this:

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

I'm trying to make it so that when the item-view click event fires, it passes that views "item" prop over to the item-detail component. So my onItemClick looks like this:

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

I can't see from the docs how to get a handle to the item-view inside that v-on:click attribute. "this" always equates to the Vue app instance inside the onItemClick method and "item" is also set to the Vue app instance.

Basically the use case is "When the item view is clicked, pass its 'item' property value to the item-detail component and display the item-detail component.".

Upvotes: 2

Views: 2853

Answers (1)

li x
li x

Reputation: 4061

After having a conversation I proposed that using Vuex was more suitable that passing logic up the chain which could lead to lots of scaling problems later in the project life cycle.

https://github.com/LiamDotPro/VuexStoreExample

This example shows how you can use a store to easily pass logic between components without direct relationships or chaining.

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>

Upvotes: 1

Related Questions