解決vuex state數據刷新清空的幾種方法

vuex state刷新配置的數據會刷新

作為一個vue小白，剛接觸到vue，很多技術都是慢慢摸索着前行的。

1.最近要做一個前端，菜單和導航都要在json中配置，看了一天vue官網，發現可以在vuex中管理菜單和導航。

const state = {
 //菜單
  menuList:[],
//系統名稱
  systemName:'',
//導航
  navMenuList:[]
}

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.缺點：

可能是增大了網絡開銷吧