vue组件之间传值

前言：在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式；但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具Vuex完美的解决了这个问题。
一、安装并引入 Vuex
1.首先使用 npm 安装 Vuex:

cnpm install vuex -S

2.项目结构：
在/src目录下创建store文件夹，里面分别创建四个文件：getters.js;index.js;mutations.js;state.js

3.然后在 main.js 中引入：（只粘贴了引入store配置）
一般情况是这样引入的；

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

但是我感觉这样太累赘，就自己封装了一层，全在store文件下下的文件里面，这样好理解；

import store from '@/store'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

而真实地引入在/store/index.js里面：
index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations.js'
import getters from './getters.js'
import state from './state.js'

Vue.use(Vuex);

const store = new Vuex.Store({
    state,
    mutations,
    getters,
});
export default store

下面将后三个js文件：
　state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。
　getters：简单说就是拿state里面的共享数据的，一般在组建里面用this.$store.state.xxxx拿（xxxx为state里面定义的变量名）。
　mutations：简单说就是把数据存储到state中，在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation，一般在组件方法里面用this.$store.commit('funcA',a)funcA是定义在mutations.js里面的方法，a是你要更新到state里面共享的数据.
　
state.js

const state = {
    // 当前选中的终端设备列表
    terminal_selection_list: [],
};
export default state

getters.js

import state from "./state";

const getters = {
    getTerminalSelectionList:(state)=>{
        return state.terminal_selection_list
    }
};
export default getters

mutations.js

const mutations = {
    change(state, data) {
      state.terminal_selection_list = data;
    },
};

export default mutations

下面我要操作了，我要在a组件更新terminal_selection_list列表的值，在方法中使用this.$store.commit('change',this.multipleSelection)

this.$store.commit('change',this.multipleSelection)`      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.$nextTick(() => {
          $('tbody tr', this.$el).each(function (index, ele) {
            let checkedTd = $('td.el-table-column--selection .is-checked', ele)
            if (checkedTd.length === 0) {
              $('td', ele).removeClass('td-black')
            } else {
              $('td', ele).addClass('td-black')
            }
          })
        })
        console.log('send multi select: ' + JSON.stringify(this.multipleSelection))
        this.$emit('multiSelect', this.multipleSelection)
        this.$store.commit('change',this.multipleSelection)
      }`

现在，我要在b组件里面拿到实时的terminal_selection_list

    computed: {
      selections:function(){
          return this.$store.state.terminal_selection_list
      }
    },

记住此时要使用computed，另外selections不要vue中data里面定义了。
这是我写的一个简单的vuex使用例子，用于理解原理和流程，对于复杂的变量多的，还是使用vuex中mapState、mapGetters、mapActions辅助函数及Module的使用mapState、mapGetters、mapActions
参考知识：vue–vuex详解
vuex最简单的使用