admin 管理员组

文章数量: 886993

nuxt 利用Vuex控制状态 切换城市以及切换城市之后跳转首页遇到的坑

nuxt 利用Vuex控制状态 切换城市以及切换城市之后跳转首页遇到的坑

  • 在 切换城市的VUE 组件中
 handleSelect: function(item) {const xzdCity = item.valuethis.$storemit('xzCity/changeCity',xzdCity)this.$router.push('/')// window.location.href = '/'              /**这里是个坑***/}
  • 在 Vuex store 中
const state = ()=>(    {xzdCity:''} )
const mutations = {   changeCity(state,val){state.xzdCity = val}
}
const actions = {    changeCity:({commit},xzdCity)=>{commit('changeCity',xzdCity)}
}
//解决不同模块命名冲突的问题，将不同模块的namespaced:true
//之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名
export default {namespaced:true,state,actions,mutations
}

在这里 遇到的坑是点击切换城市之后，页面会重新刷新，刚开始使用的是

window.location.href = '/'

跳转到首页 ，从VUE 的开发工具中也能看到 state 值得变化，但是在切换 Vuex 中的state 的时候会清空，后来打算将 其切换的值存放到 window.localStorage中，但是由于是 nuxt SSR服务端渲染 所以 会报错

最后解决这个坑 是将

      	this.$router.push('/')  						 //换成这个就可以了// window.location.href = '/'              /**这里是个坑***/

本文标签： nuxt 利用Vuex控制状态 切换城市以及切换城市之后跳转首页遇到的坑

版权声明：本文标题：nuxt 利用Vuex控制状态 切换城市以及切换城市之后跳转首页遇到的坑 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732353998h1533912.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。