vuex 兄弟组件传值

1安装vuex

npm install vuex --save

2、新建store文件夹，创建index.js

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

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    objData:JSON.parse(window.sessionStorage.getItem('objData'))||{},//对象
    arryData:JSON.parse(window.sessionStorage.getItem('arryData'))||[],//数组
  },
  mutations: {
    //对象
    objDataDetail(state, objData) {
      let data = Object.assign({}, state.objData, objData);
      state.objData = data;
      //window.sessionStorage.setItem('objData', JSON.stringify(objData))//存储对象
    },
    //数组
    arryDataDetail(state, arryData) {
      let data = Object.assign([], state.arryData, arryData);
      state.arryData = data;
      //window.sessionStorage.setItem('arryData', JSON.stringify(arryData))//存储数组
    },
  },
  actions: {
    saveObjData({ commit }, payload) {
      commit('saveObjData', payload)
    },
    saveArryData({ commit }, payload) {
      commit('saveArryData', payload)
    }
  },
  modules: {
  },
  getters: {
    
  },
})

4、在main.js引用

import store from './store'

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

3、弟页面传值兄页面

<template>
    <div class="di">
        <el-button type="primary" @click="saveObjData"></el-button>
        <el-button type="primary" @click="saveObjArry"></el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            diObjData:{},
            diArryData:[]
        }
    },
methods: {
    //存储对象
    saveObjData(){
        this.$store.dispatch("saveSingleFree",this.diObjData);
    },
    //存储数组
    saveObjArry(){
        this.$store.dispatch("saveSingleFree",this.diArryData);
    }
},
}
</script>

4、兄页面接收传值

<template>
    <div class="xiong">
        
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            newObjData:{},
            newArryData:[]
        }
    },
    computed: {
    ...mapState(["objData", "arryData"]),
  },
  watch: {
    objData: {
      handler(newObj, oldObj) {
        console.log(newObj, "最新对象");
        this.newObjData=newObj;
      },
      deep: true,
      immediate: true,//很重要
    },
    tripDataArry: {
      handler(newArry, oldArry) {
        this.newArryData = newArry;
        console.log(newArry, "最新对象");
      },
      deep: true,
      immediate: true,//很重要
    },
  },
}
</script>

如有错误之处，请各位多多指正