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