组件间传值（子传子）

组件间传值vuex（子传子）

不同组件间（非父子之间）如何实现数据的传递以及数据的联动呢？这里我们将用到vuex进行数据联动

---

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 而状态管理模式包括 1.state，驱动应用的数据源； 2.view，以声明方式将 state 映射到视图； 3.actions，响应在 view 上的用户输入导致的状态变化。 Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。需要构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

---

实现功能：

假设有子组件A和子组件B，当A中数据发生变化时，B组件中数据随其变化。

---

实现步骤：

1.安装vuex
cnpm installvuex -S
2.main.js中引入

import Vuex from 'Vuex';
import store from "./vuex/store";

Vue.use(Vuex);

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>',
  render: h => h(App)
})

3.构建核心仓库store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    title: '单行文字',
  },
  mutations:{
    newTitle(state,msg){
      state.title=msg
    },
  }
})

4.将状态映射到组件A

<template>
        <div class="form" id="form1