vue3 store传值

做前端开发的时候用到二个没有父子关系的组件之间需要传值，就想到了store传值

store--index.js配置

import { createStore } from 'vuex'
const setStorage = (key, value) => {
  sessionStorage.setItem(key, value);
};

// 本地获取
const getStorage = item => {
  let str = sessionStorage.getItem(item);
  return str;
};

const store = createStore({
  state: {
    menuRouter: '',
  },
  mutations: {
    statechange(state, r) {
      if (state.hasOwnProperty(r.ways)) {
        state[r.ways] = r.data;
        setStorage(r.ways, r.data);
      }
    }
  }
});

页面操作传参（例如点击传参）

<script setup>
  import { useStore } from 'vuex' // 引入useStore 方法
  const store = useStore()

  store.commit("statechange", {
    ways: 'menuRouter',
    data: {
     mark:"1",// 标识字段，如用到多个store传值，不知道传给哪个组件，可给个标识判断一下
     aaa:"xxx",
     bbb:"xxx",//字段可以随便写，几个都行，传你需要的值即可
    }
  })
</script>

另外一个组件接收

<script setup>  
  import { useStore } from 'vuex' // 引入useStore 方法
  const store = useStore()

  const path = reactive({
    value: computed(()=>store.state.menuRouter)
  })
  watch(() => path.value, val => {
    if(val){
      if(val.mark == '1'){// 标识字段判定
        console.log(val.aaa)
        console.log(val.bbb)
      }
    }
  })
</script>