vue中,store.js和router.js怎么互相调用

问题描述

使用了VueXvue-router的Vue项目中,

  1. store.js中import router
  2. router.js中import store
  3. main.js中同时import store和router

导致出错

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
main.js中

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

router.js中

import store from './store'
var router = new Router({
  routes: [
    {
      path: '/',
      redirect: function(){
          //此处需要通过查询store中储存的权限,判断应该让用户去哪个页面,所以引入了store
      }
    }
  ]
})

store.js中

import Vue from 'vue'
import Vuex from 'vuex'
import router from './router'
Vue.use(Vuex);

var store = new Vuex.Store({
  mutations: {
    logout(state){
      router.push("/login");//此处需要跳转到登录页,因此引入了router
    }
  }
})

你期待的结果是什么?实际看到的错误信息又是什么?

回答:

globals.js

const datas = {}
export const setRouter = router => {
  datas.router = router
}
export const setStore = store => {
  datas.store = store
}
export const getRouter = () => datas.router
export const getStore = () => datas.store

router.js

import { setRouter, getStore } from './globals'
const router = new Router({
  routes: [
    {
      path: '/',
      redirect(){
          const store = getStore()
          //此处需要通过查询store中储存的权限,判断应该让用户去哪个页面,所以引入了store
      }
    }
  ]
})
setRouter(router)

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { setStore, getRouter } from './globals'
Vue.use(Vuex);

const store = new Vuex.Store({
  actions: {
    logout(){
      const router = getRouter()
      router.push("/login");//此处需要跳转到登录页,因此引入了router
    }
  }
})

回答:

import store from ‘./store’ // 先引入store

// 使用
store.state.xxx // 获取state的数据
store.getters.xxx // 获取getters的数据
store.commit(‘mutationFun’, param, param2…) // commit执行mutations中的方法,param为参数
store.dispatch(‘actionFun’, param1, param2…) // dispatch执行actions中的方法,param为参数

回答:

1、首先不需要在store里面引入router了吧,store只保存数据,跳转到某个页面的逻辑应该在router里。
2、权限判断去跳转路由使用导航手腕链接描述

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注