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最简单的使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值