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

}

}

exportdefault 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.缺点：

可能是增大了网络开销吧