Обмен данными между компонентами в vue.js - PullRequest
Новая
       44

Обмен данными между компонентами в vue.js

0 голосов
/ 23 марта 2019

Я получил массив данных в одном компоненте, к которому я хочу получить доступ в другом компоненте, но не могу сделать это правильно

Моя идея состояла в том, чтобы просто импортировать компонент один в компоненте два, и я думал, что могу получить доступ к данным втаким образом, но это не сработало.

вот что я получил до сих пор ...

Компонент 1: 

export default {
  data() {
    return {
      info: [
        {
          id: 1,
          title: "Title One"
        },
        {
          id: 2,
          title: "Title Two"
        },

Компонент 2: 

<template>
  <div>
      <div v-for="item in info" v-bind:key="item.id">
         <div>{{ item.title }} </div>
      </div>
  </div>
</template> 

<script>
import ComponentOne from "../views/ComponentOne ";

export default {
  components: {
    ComponentOne 
  },  But after this I am a bit lost

Может кто-нибудь направить меня в правильном направлении, это будет очень цениться!

Ответы [ 2 ]

1 голос
/ 23 марта 2019

Для доступа к общим данным наиболее распространенным способом является использование Vuex . Я познакомлю вас с основами модульной системы, так как это займет немного времени.

npm install vuex --save

Создайте новую папку с именем store в каталоге src.

ЦСИ / магазин / index.js 

import Vue from 'vue'
import Vuex from 'vuex'
import example from './modules/example'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    example // replace with whatever you want to call it
  }
})

ЦСИ / main.js 

// add to your imports
import store from './store/index'
...

// Change your Vue instance init
new Vue({
  router,
  store, // <--- this bit is the thing to add
  render: h => h(App)
}).$mount('#app')

/ SRC / магазин / модули / example.js 

// initial state
const state = {
  info: []
}

// getters
const getters = {}

// actions
const actions = {
}

// mutations
const mutations = {
  set (state, newState) {
    state.info.splice(0)
    state.info.push.apply(state.info, newState)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

Чтобы обновить хранилище при получении информации, из любого компонента вы можете использовать this.$store.commit('example/set', infoArray), где первый параметр соответствует шаблону module name/mutation function name, а второй параметр - это «новое состояние», которое вы хотите обновить.

Чтобы получить доступ к данным из хранилища, вы можете получить к ним доступ из своих компонентов в виде вычисляемого свойства: 

computed: {
  info () {
    return this.$store.state.example.info
  }
}

Очевидно, что вы можете использовать методы получения, действия и другие вещи, но это поможет вам начать работу, и вы сможете читать и изменять магазин Vuex, как только вам станет удобно и понять, как он работает.

0 голосов
/ 23 марта 2019

Допустим, если вы не хотите использовать какое-либо другое управление состоянием, например vuex, вы можете поделиться с использованием mixins.

Ну, вы можете достичь этого с помощью Vue.mixins.

Миксины - это гибкий способ распространения многократно используемых функций для компонентов Vue. Объект mixin может содержать любые параметры компонента. Когда компонент использует миксин, все параметры в mixins будут «смешаны» с собственными параметрами компонента.

Официальный Mixins Документы

Надеюсь, это поможет!

...