vue.js - 关于vuex 和 vuex-router-sync的问题

问题描述

问 题

应用场景：

我们想把router和vuex联系起来，使用的是vuex-router-sync。先看一下我们怎么实现，代码如下
main.js
    import Router from 'vue-router'
    import Vuex from 'Vuex'
    import store from './vuex/store'
    import routerMap from './routerMap'
    import { sync } from 'vuex-router-sync'
    
    Vue.use(Router)
    Vue.use(Vuex)
    const router = new Router({
      hashbang: true,
      history: true,
      saveScrollPosition: true,
      transitionOnLoad: false
    })
    routerMap(router)
    sync(store, router)
    const appInstance = Vue.extend({store})
    router.start(appInstance, '#app')
    router.go('/main')
    
    实际store以及挂载上去了的
    

但是console会报错，报错如图

console的详细错误函数是

store截图：

import Vue from 'Vue'
import Vuex from 'Vuex'

Vue.use(Vuex)

const state = {
  count: 23
}

const mutations = {
  INCREMENT (state) {
    state.count++
  },
  DECREMENT (state) {
    state.count--
  }
}

export default new Vuex.Store({
  state,
  mutations
})

路由表截图：

    export default function (router) {
  router.map({
    '/': {
      name: 'main',
      component: require('./components/main/main-panel.vue')
    },
    '/main': {
      name: 'main',
      component: require('./components/main/main-panel.vue'),
      subRoutes: {
        '/': {
          name: 'inbox',
          component: require('./components/main/inbox/inbox.vue'),
          subRoutes: {
            '/': {
              name: 'all',
              component: require('./components/main/inbox/all-update.vue')
            },
            '/onlyCollect': {
              name: 'onlyCollect',
              component: (resolve) => resolve(require('./components/main/inbox/only-collect.vue'))
            }
          }
        },
        '/inbox': {
          name: 'inbox',
          component: require('./components/main/inbox/inbox.vue'),
          subRoutes: {
            '/': {
              name: 'all',
              component: require('./components/main/inbox/all-update.vue')
            },
            '/onlyCollect': {
              name: 'onlyCollect',
              component: (resolve) => resolve(require('./components/main/inbox/only-collect.vue'))
            }
          }
        },
        '/collect': {
          name: 'collect',
          component: (resolve) => resolve(require('./components/main/collect/collect.vue'))
        }
      }
    },
    '/top': {
      name: 'top',
      component: (resolve) => resolve(require('./components/top.vue'))
    },
    '/login': {
      name: 'login',
      component: (resolve) => resolve(require('./components/login/login.vue'))
    },
    '/reset': {
      name: 'reset',
      component: (resolve) => resolve(require('./components/login/reset-psw.vue'))
    }
  })
}

有知道的朋友麻烦指导一下，谢谢啦。

解决方案

關於報錯那行，應該是引用 vuex 的版本錯誤

Note: requires vuex>=0.6.2.

版本必須是 0.6.2 或是大於 0.6.2

这篇关于vue.js - 关于vuex 和 vuex-router-sync的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！