非父子组件使用 vuex 传参

首先要先安装 vuex

npm install vuex --save

如果是修改成熟的项目，一般不需要此步骤。

在store 文件夹下创建 index.js 文件

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

Vue.use(Vuex)

// 创建仓库，用来存储共用的数据
export default new Vuex.stroe({
	state: {
		appList: [],
    	platformList: []
	}，
	mutations: {
		'SET_APPLIST' (state, data) {
	      state.appList = data
	    },
	    'SET_PLATFORMLIST' (state, data) {
	      state.platformList = data
	    },
	},
	actions: {
		navigationIfo({ commit }){   //2.使用actions:{}接收list传过来的数据
      		return Login.navigationIfo()  //3.actions使用commit把数据传给mutations:{}
  		}
	}
})

传输数据文件 A.vue

<template>
	<div>xxx</div>
</template>

<script>
	export default {
		data () {},
		created () {
			this.navigationIfo()
		},
		methods () {
			navigationIfo() {
				//1.使用dispatch把数据传回index.js
		      this.$store.dispatch('navigationIfo').then(res => {
		      if (res.data.status) {
		        let result = res.data.data
		        this.$store.commit('SET_APPLIST', result.appList)
		        this.$store.commit('SET_PLATFORMLIST', result.platformList)
		      }
		      // loadingInstance.close()
		    })
		}
	}
</script>

接受数据文件 B.vue

<template>
	<div> 
		<span > xx </span>
	</div>
</template>

<script>
	export default {
		data () {},
		created () {},
		methods () {
		// 对获取的list进行二次设置
    setApplist() {
      let ipconfig = ip
      // 接收从 A 文件传输过来的数据,这样就可以直接使用了
      let appList = this.$store.state.appList
      let paltList = this.$store.state.platformList
      console.log(appList,platformList,'213')
      }
	}
</script>

以上是使用 vuex 方法来对非父子组件进行数据传输，但是有一个问题：就是页面刷新之后 store 数据丢失。 至于如何解决，请看下篇文章！

之前最先使用的是 eventBus 传参的，但是后面遇到了 push undefined 的问题没有解决，就改用了vuex，如果你有使用 eventBus 的经验，欢迎交流。