详情页面，编辑页面取父级页面的数据问题

1.params，跟query都可以实现，但是query将参数暴露在url不安全，params则是用户手动刷新页面后数据丢失

2.params实现手动刷新不丢失数据的常用方法在路由的path后面加上传的params参数，

例如：/system/divisionManage/clientDatum/:divisionId

上诉方法会在url后面有/system/divisionManage/clientDatum/1039这样子的参数展示出来，也不安全

3.只能用params+vuex存进状态值来解决

例如：import {COMMIT_INTERFACE}from "@/store"

modules文件里面

//  系统管理

import {COMMIT_INTERFACE}from "@/store"

interface STATE {

        //部门管理---商品列表，关联医院，关联渠道商用

        divisionId:number;

        divisionItem:any;

}

const state:STATE = {

        divisionId:0,

        divisionItem:null,

}

const mutations = {

        SET_DIVISION_ID: (state:STATE, divisionId:number) => {

                 state.divisionId = divisionId

        },

        SET_DIVISION_ITEM: (state:STATE, divisionItem:number) => {

                 state.divisionItem = divisionItem

         },

}

const actions = {

          setDivisionId: ({commit}:COMMIT_INTERFACE, divisionId:number) => {

                  commit('SET_DIVISION_ID', divisionId)

           },

            setDivisionItem: ({commit}:COMMIT_INTERFACE, divisionItem:any) => {

                   commit('SET_DIVISION_ITEM', divisionItem)

            },

}

export default {

        namespaced:true,

         state,

         mutations,

         actions

}

getters文件里面

const getters = {

// 系统管理

system: (state:any) => state.app.system,

}

export default getters;

调用

this.setDivisionId(sItem.id);存

this.$store.state.system.divisionId;取------可以在计算属性computed取

例如

//部门或机构的id

divisionId(){

// console.log(this.$route.params.divisionId);

// return this.$route.params.divisionId;

  console.log(this.$store.state.system.divisionId);

return this.$store.state.system.divisionId;

}

4.问题vuex在用户手动刷新页面后状态值就会丢失

解决办法：

1.//在页面加载时读取sessionStorage里的状态信息

if (sessionStorage.getItem("store") ) {

this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store"))))

}

//在页面刷新时将vuex里的信息保存到sessionStorage里

window.addEventListener("beforeunload",()=>{

sessionStorage.setItem("store",JSON.stringify(this.$store.state))

})

在用户退出的时候清楚sessionStorage

2.使用一些vue的插件，例如 vuex-persistedstate ，实际上其根本原理就是将vuex中的state存在 localStorage或者sessionStorage中，在页面刷新之后vuex在从 localStorage中把数据拿回来