vuex状态存储的使用
1、先定义一个状态
const state = {
sidebar: {
opened: true,
withoutAnimation: false
},
device: 'desktop',
projectId: sessionStorage.getItem('projectId'),
type:0,
//新添加一个状态 从sessionStorage里面去拿
projectType: sessionStorage.getItem("projectType"),
}
//mutations 由于修改state中的参数的
const mutations = {
toggle_sideBar: state => {
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false
},
close_sideBar: (state, withoutAnimation) => {
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
get_projectId:(state,id)=>{
state.projectId = id
},
get_type:(state,type)=>{
state.type = type
},
toggle_device: (state, device) => {
state.device = device
},
// 设置这个类型修改状态的方法
get_projectType:(state,projectType)=>{
state.projectType = projectType
},
}
// 用于提交mutations 操作的
const actions = {
toggleSideBar({ commit }) {
commit('toggle_sideBar')
},
closeSideBar({ commit }, { withoutAnimation }) {
commit('close_sideBar', withoutAnimation)
},
toggleDevice({ commit }, device) {
commit('toggle_device', device)
},
getProjectId({ commit }, id) {
commit('get_projectId', id)
},
getType({ commit }, type) {
commit('get_type', type)
},
//提交设置projectType的操作
getProjectType({ commit }, projectType) {
commit('get_projectType', projectType)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
2、在页面中 如果是单独获取某个状态的话
data() {
return {
projectName: "",
projectData: [],
projectInfo: {},
regionList: [],
regionProps: {
value: "id",
label: "regionName",
},
//这里可以获取到状态
projectType: this.$store.state.app.projectType,
};
},
methods: {
getProjectInfoData() {
let params = {
page: 1,
rows: 500,
//根据这个状态去查询数据
projectType: this.projectType
};
getProjectInfo(params).then((res) => {
this.projectData = res.rows;
this.projectData.map((e) => {
if (e.id === Number(this.$store.state.app.projectId)) {
this.projectInfo = e;
}
});
});
},
3、在页面中 如果是这个状态是变化的话
data() {
return {
projectName: "",
projectData: [],
projectInfo: {},
regionList: [],
regionProps: {
value: "id",
label: "regionName",
},
//这里可以获取到状态 这里只能初始化获取,后面改不了,他不会自动重新获取
//projectType: this.$store.state.app.projectType,
};
},
methods: {
getProjectInfoData() {
let params = {
page: 1,
rows: 500,
//根据这个状态去查询数据
projectType: this.projectType
};
getProjectInfo(params).then((res) => {
this.projectData = res.rows;
this.projectData.map((e) => {
if (e.id === Number(this.$store.state.app.projectId)) {
this.projectInfo = e;
}
});
});
//点击按钮
handleClick(row) {
this.projectName = row.entryName;
this.projectInfo = row;
sessionStorage.setItem("project", JSON.stringify(row));
sessionStorage.setItem("projectId", row.id);
//切换了其他类型(不同的projectType值) 重新去存储到sessionStorage中
sessionStorage.setItem("projectType", row.projectType);
this.$store.dispatch("app/getProjectId", row.id);
//使用dispatch方法用来提交操作
this.$store.dispatch("app/getProjectType", row.projectType);
sessionStorage.setItem("projectName", row.entryName);
getActivekMenus();
},
},
3、在其他页面中通过判断状态的改变去做相关操作
watch: {
//侦听状态如果变化了则做相关操作,没有则不执行
projectType(newV, oldV) {
this.menus = JSON.parse(sessionStorage.getItem("projectData"));
this.$router.push({ path: "/" + this.menus[0].path });
this.activeIndex = 0;
}
},
computed: {
//获取状态
projectType() {
return this.$store.state.app.projectType;
}
},