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

前言:

      在这里分享下个人项目中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);
      }
    },