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

Question

问题描述

使用了VueX和vue-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
    }
  }
})

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

Answer 1

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
    }
  }
})

Answer 2

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为参数

Answer 3

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