vue--在router里面如何修改vuex中的state

今天为大家介绍一下在router里面如何修改vuex中的state!

(如果解决了您的问题,请帮忙给我点个赞吧,谢谢!!!)

简述功能: 

       我想实现的功能是  加载首页组件 显示当前地理位置,其他组件,我就不显示了,所以我就选择了在路由中去判断,根据条件去修改vuex中的值这种办法!(主要是想介绍在router里面如何修改vuex中的state)

第一步 :在你的router目录下的index.js 中引入 vuex  (我是写成了一个单独的js)

直接复制 : import store from '../store/index'    (路径自己改好就行) 

第二步:  配置路由,在你需要展示的组件中,加入如下代码 :

直接复制:

{path: '/home', component: home,

      meta:{

        location : true   // 这个就是条件

      }

    },

第三步: 判断即将要去到的组件中 是否需要展示当前地理位置   

直接复制:

router.beforeEach((to, from, next) => {

  let token = window.sessionStorage.getItem('token')

  if (to.meta.location) {  //判断在这   

    store.dispatch('vmlocation',true)

  }else{

    store.dispatch('vmlocation',false)

  }

  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限

    if (token) { // 获取当前的token是否存在   

      next()

    }else {

      //console.log('该页面需要登陆')

      next({

        path: '/logoin'

        // query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由

      })

      //router.push("/mux")     

    }

  }else {

    next()

  }

})

你可能感兴趣的:(vue--在router里面如何修改vuex中的state)