vue项目中vuex跨组件传值的具体用法

最新推荐文章于 2025-05-21 16:08:24 发布

妍崽崽@

最新推荐文章于 2025-05-21 16:08:24 发布

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44727080/article/details/112943111

vue 专栏收录该内容

138 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用Vuex进行状态管理，特别是处理不同组件间的通信问题。通过创建state来定义变量，mutations来修改状态，actions进行后台请求，getters则用于对外暴露state的值。在实际应用中，当左侧菜单栏点击事件触发时，通过Vuex更新state，然后在右侧组件中通过getters监听并响应state的变化，从而实现实时同步数据。

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

前言:

在这里分享下个人项目中vuex的用法，vuex主要是被用来做不同层级组件直接的传值。

分析逻辑：

a页面和b页面不同逻辑， a页面点击事件，b页面需要能监听到

vuex的介绍：分为4个状态

1、state  这里跟我们页面上的data很类似是定义变量的 
2、mutations  vuex的逻辑操作修改都在这个阶段里面进行
3、actions  vuex里面 如果想请求后台的话，必须在这个阶段里面进行
4、getters   在这个阶段，可以把state里面的值发送出去，页面也需要监听这个阶段的值

因为我们的vuex可能分为很多模块，这里就需要用到他的  modules



import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'   //其中一个模块
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,  //注册在这里
  },
  getters
})

export default store

个人使用步骤：

一定义vuex这个里面需要的东西

首先先建立一个这样的store文件夹，user.js文件里面的内容是这样的

const user = {
  state: {
    menuClick: {},//当前点击的情况
    sbzqClick:{},
  },

  mutations: {
    //修改state里面的menuClick
    SET_MENU_CLCIK: (state, data) => {
      state.menuClick = data
    },
    SET_SBZQ_CLCIK: (state, data) => {
      state.sbzqClick = data
    },
  },

  actions: {
  }
}
export default user

getters.js里面的内容是这样的

const getters = {
  menuClick: state => state.user.menuClick,
  sbzqClick:state => state.user.sbzqClick,
}

export default getters

index.js里面的内容是这样的

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,  },
  getters
})

export default store

二解决实际点击跨组件传递

现在我们遇到一个问题是这样的

点击左边的菜单栏，想使右边的申报周期下拉里面的值发生改变？？？？怎样做呢？思路是这样的:

1.首先我们在a组件点击事件的方法上写发送事件，看图详解这个是我左边菜单栏发送的部分具体写况；

接下来就到我们vuex里面的具体操作了，看图

然后我们在b组件接收使用他，第一步先引入：（这句话必须引入）

import { mapGetters, mapActions } from 'vuex'

第二步：

代码bia上来，以便下次操作

 computed: {
      ...mapGetters(['menuClick'])
    },
    watch: {
      ...mapGetters(['menuClick']),
      /**
       * 用vuex实时监听state里面menuClick的变换
       * */
      menuClick(val){
        let djxh = val.djxh
        this.sbzjxVal = '';//默认
        this.getYear(djxh);
      }
    },