解决vuex state数据刷新清空的几种方法

Posted 2020-10-12

vuex state刷新配置的数据会刷新

作为一个vue小白，刚接触到vue，很多技术都是慢慢摸索着前行的。

1.最近要做一个前端，菜单和导航都要在json中配置，看了一天vue官网，发现可以在vuex中管理菜单和导航。

 1 const state = {
 2  //菜单
 3   menuList:[],
 4 //系统名称
 5   systemName:‘‘,
 6 //导航
 7   navMenuList:[]
 8 }
 9 
10 export default state

const mutations = {
 
  setMenuList(state,data){
    state.menuList=data
  },
  setSystemName(state,data){
    state.systemName=data
  },
  setNavMenuList(state,data){
    state.navMenuList=data
  }
  
}
export default mutations

然后在main.vue和navmenu.vue使用http分别获取了json，然后提交到mutation中。在computed计算属性中获取state中的值

computed:{
      systemName:{
        get(){
          return this.$store.state.systemName
        }
      },
      menuList:{
        get(){
     
            return this.$store.state.menuList
        }
      }
    },
created() {
 let menuUrl=this.HOST+‘../../static/menu.json‘
       this.$http.get(menuUrl).then((response)=>{
      
          this.$store.commit(‘setMenuList‘,response.body.menuList)
          this.$store.commit(‘setSystemName‘,response.body.systemName)
       })
}

computed: {
      navMenuList:{
        get(){      
          return this.$store.state.navMenuList
        }
      }
    },
    created() {
       let url=this.HOST+‘../../../static/navmenu.json‘
       this.$http.get(url).then((response)=>{
         this.$store.commit(‘setNavMenuList‘,response.body.navMenuList)
       })
    }

这样写完之后，却发现刷新页面是有值的，但是在login登入的时候却没有值，所以在login.vue中的created中也commit了一下，才得到想要的结果。

如果只在login.vue中commit  state的值，刷新页面后菜单和导航全部消失了

查了资料又看了官网，mutation是响应式的，导致刷新页面后仓库被清空了。

因为我不想既在父页面commit，又在子页面commit，这样太复杂了，就想找一种简单的方法

2.经过探索，发现src/main.js中的操作都是全局的，所以就在main.js的created中commit  mutation，其他地方的commit都删掉了，

发现结果无论是login登陆还是刷新页面都能显示菜单和导航。

3.在网上查找资料的过程中，发现其他人的做法都是使用localstorage，因为这方面的只是不够，所以自己没有成功，

附上链接http://www.cnblogs.com/limengyi/p/6534435.html

还有一种方法是在router路由管理其中commit的，估计和我的第2种方法是一样的

4.缺点：

可能是增大了网络开销吧