vue3 store传值

最新推荐文章于 2025-04-11 09:28:54 发布

我就是你的语法糖️

最新推荐文章于 2025-04-11 09:28:54 发布

阅读量2.5k

点赞数

分类专栏： vue3 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_43274430/article/details/128640007

版权

vue3 专栏收录该内容

12 篇文章

订阅专栏

文章介绍了在前端开发中，通过Vuex的状态管理器实现两个没有父子关系的组件之间的数据传递。具体方法是创建store，定义state和mutations，然后在组件中使用commit修改状态，并在另一个组件中通过watch监听并接收数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做前端开发的时候用到二个没有父子关系的组件之间需要传值，就想到了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>