116 lines
4.2 KiB
JavaScript
116 lines
4.2 KiB
JavaScript
|
import Vue from 'vue'
|
|||
|
|
import Vuex from 'vuex'
|
|||
|
|
|
|||
|
|
Vue.use(Vuex)
|
|||
|
|
|
|||
|
|
export default new Vuex.Store({
|
|||
|
|
state: {
|
|||
|
|
sessionId: settingParam.sessionId,
|
|||
|
|
topMainHeight: '',// PAL主页面主体高度，
|
|||
|
|
navigationQueryVisible: false, // 导航栏输入框的快速搜索结果显示控制
|
|||
|
|
navigationConditionQueryVisible: false, // 导航栏输入框的快速搜索结果显示控制
|
|||
|
|
wsId: '',// 资产库id
|
|||
|
|
teamId: ''// 小组id
|
|||
|
|
},
|
|||
|
|
getters: {// 提供获取state相关数据的方法
|
|||
|
|
getTopMainHeightFn(state) {// 获取PAL主页面主体高度
|
|||
|
|
//console.log('get height ' + state.topMainHeight);
|
|||
|
|
return state.topMainHeight;
|
|||
|
|
},
|
|||
|
|
getNavigationQueryVisibleFn(state) {// 获取PAL导航栏搜索框结果的显示与隐藏
|
|||
|
|
return state.navigationQueryVisible;
|
|||
|
|
},
|
|||
|
|
getNavigationConditionQueryVisibleFn(state) {// 获取PAL导航栏条件搜索框结果的显示与隐藏
|
|||
|
|
return state.navigationConditionQueryVisible;
|
|||
|
|
},
|
|||
|
|
getTeamIdFn(state) {// 获取小组id
|
|||
|
|
return state.teamId;
|
|||
|
|
},
|
|||
|
|
getWsIdFn(state) {// 获取资产库id
|
|||
|
|
return state.wsId;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
actions: {// 提供跟后台接口交互的方法，并且调用mutations提供的方法进行更新提交
|
|||
|
|
setTopMainHeightFn({commit, state}, height) {// 设置PAL主页面主体高度更新
|
|||
|
|
commit("setTopMainHeightFn", height);
|
|||
|
|
//console.log('dispatch update height ' + height);
|
|||
|
|
},
|
|||
|
|
setNavigationQueryVisibleFn({commit, state}, visible) {// 设置PAL导航栏搜索框结果的显示与隐藏
|
|||
|
|
commit("setNavigationQueryVisibleFn", visible);
|
|||
|
|
},
|
|||
|
|
setNavigationConditionQueryVisibleFn({commit, state}, visible) {// 设置PAL导航栏条件搜索框结果的显示与隐藏
|
|||
|
|
commit("setNavigationConditionQueryVisibleFn", visible);
|
|||
|
|
},
|
|||
|
|
setTeamIdFn({commit, state}, teamId) {
|
|||
|
|
commit('setTeamIdFn', teamId)
|
|||
|
|
},
|
|||
|
|
setWsIdFn({commit, state}, wsId) {
|
|||
|
|
commit('setWsIdFn', wsId)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mutations: {// 提供存储设置state数据的方法
|
|||
|
|
setTopMainHeightFn(state, height) {// 设置PAL主页面主体高度更新
|
|||
|
|
state.topMainHeight = height;
|
|||
|
|
},
|
|||
|
|
setNavigationQueryVisibleFn(state, visible) {// 设置PAL导航栏搜索框结果的显示与隐藏
|
|||
|
|
state.navigationQueryVisible = visible;
|
|||
|
|
},
|
|||
|
|
setNavigationConditionQueryVisibleFn(state, visible) {// 设置PAL导航栏条件搜索框结果的显示与隐藏
|
|||
|
|
state.navigationConditionQueryVisible = visible;
|
|||
|
|
},
|
|||
|
|
setTeamIdFn(state, teamId) {// 设置资产库小组Id
|
|||
|
|
state.teamId = teamId;
|
|||
|
|
},
|
|||
|
|
setWsIdFn(state, wsId) {// 设置资产库Id
|
|||
|
|
state.wsId = wsId;
|
|||
|
|
},
|
|||
|
|
edit(state, data) {
|
|||
|
|
for (let p in data) {
|
|||
|
|
state[p] = data[p];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
modules: {
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
在state中定义数据
|
|||
|
|
|
|||
|
|
Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getters 可以用于监听、state中的值的变化，返回计算后的结果
|
|||
|
|
|
|||
|
|
给action注册事件处理函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参
|
|||
|
|
|
|||
|
|
mutations是一个对象里。面的方法 都是同步事务，是更改state初始状态的唯一合法方法，具体的用法就是给里面的方法传入参数state或额外的参数
|
|||
|
|
|
|||
|
|
代码中设置全局存储方法：
|
|||
|
|
|
|||
|
|
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
|
|||
|
|
|
|||
|
|
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
|
|||
|
|
|
|||
|
|
代码中取值方法：
|
|||
|
|
getters: 写法：this.$store.getters.getTopMainHeightFn
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
多级嵌套组件监听用法
|
|||
|
|
父组件：Main.vue
|
|||
|
|
某子组件：Child.vue
|
|||
|
|
父组件进行变量赋值
|
|||
|
|
this.$store.commit('setTopMainHeightFn',this.bodyHeight);// 更新主体高度存储
|
|||
|
|
子组件获取并监听父组件设置的变量变化
|
|||
|
|
computed: {
|
|||
|
|
listenTopMainHeight() {
|
|||
|
|
return this.$store.getters.getTopMainHeightFn;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch : {
|
|||
|
|
listenTopMainHeight: function (newd, old) {
|
|||
|
|
console.log("old " + old);
|
|||
|
|
console.log("new " + newd);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|