vuejs2:如何将 vuex 存储传递给 vue-router 组件

Posted

技术标签:

【中文标题】vuejs2:如何将 vuex 存储传递给 vue-router 组件【英文标题】:vuejs2: How to pass vuex store to vue-router components 【发布时间】:2018-10-02 05:39:10 【问题描述】:

如果不使用vue-router,可以在声明new Vue()时将store传递给子组件

但我同时使用vue-routervuex。在这种情况下,我怎样才能使store 可用于components。例如我的store.js 很典型:

import Vue from 'vue'
import Vuex from 'vuex'
import jwt_decode from 'jwt-decode'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex);
Vue.use(VueAxios, axios);

export const store = new Vuex.Store(
  state: 
    jwt: localStorage.getItem('t'),
    endpoints: 
      obtainJWT: 'http://0.0.0.0:8000/auth/obtain_token',
      refreshJWT: 'http://0.0.0.0:8000/auth/refresh_token'
    
  ,
  mutations: 
    updateToken(state, newToken)
      localStorage.setItem('t', newToken);
      state.jwt = newToken;
    ,
    removeToken(state)
      localStorage.removeItem('t');
      state.jwt = null;
    
  ,
  actions:
    obtainToken(username, password)
    //commented code
    ,
    refreshToken()
    //commented code
    ,
    inspectToken()
    //commented code
    
  
  );

我的 main.js 文件如下:

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

Vue.config.productionTip = false

import  store  from './store'
console.log(store)
new Vue(
  el: '#app',
  router,
  store,
  components:  App ,
  template: '<App/>'
)

router/index.js 文件如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Signup from '@/components/signup/Signup'
import store from '../store.js'

Vue.use(Router)

export default new Router(
  mode: 'history',
  routes: [
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    ,
    
      path: '/login',
      name: 'Login',
      component: function (resolve) 
        require(['@/components/login/Login.vue'], resolve)
      
    ,
    
      path: '/signup',
      name: 'Signup',
      component: Signup
    
  ]
)

现在我如何将store 传递给我的Signup 组件。即使我在new Vue() 中传递存储,它在Signup 组件中也不可用

【问题讨论】:

【参考方案1】:

我认为问题在于您导入商店并使用../store.js,但是当您导入js文件时,您不必使用.js所以它必须是import store from '../store'

您也不必使用 vue-router 在组件中传递 vuex 存储。 所以下面跟着vuex store和vue-router的安装!

Vuex 商店:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store  = new Vuex.Store(
    state: 
        propertiesName: 'PropValue'
    ,
    getters: ,
    mutations: ,
    actions: 
);

Vue-Router:

import Vue from 'vue'
import Router from 'vue-router'
import Page from '@/components/Page.vue'

Vue.use(Router)

export default new Router(
  routes: [
    
      path: '/Page',
      name: 'Page',
      component: Page,
    ,
    //other routes
  ],
  mode: 'history',
  scrollBehavior(to, from, savedPosition) 
    if(savedPosition) //when use press back button will go at the position he was on the page
        return savedPosition
    
    if(to.hash) //if has a hash positition to go
        return  selector: to.hash  //go to the page in scrolled Position
    
    return  x:0, y: 0  //go to the page in scroll = 0 Position
    
)

main.js:

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

new Vue(
  el: '#app',
  router,
  store,
  template: '<App/>',
  components:  App 
)

注意:这样做,现在您可以访问路由器并存储在所有组件中

在你的组件中使用 store:

this.$store.state.propertiesName

在你的组件中使用路由器:

this.$router.push(name: 'Page')

【讨论】:

您好,感谢您的回答。我尝试了您的解决方案,您对导入的疑问不是问题。我修改了您提到的代码,console.log(store) 仍在 main.js 中打印store 对象,但console.log(this.$store) 正在组件中打印undefined。我已经编辑了问题以提供确切的代码,请看一下 嗨,我发现了问题。该商店从一开始就可用,但我在组件 很高兴为您提供帮助,但是您仍然不必在路由器文件中导入商店。为什么要导入它? 哦...我忘记删除了!正如你提到的,它不是必需的

以上是关于vuejs2:如何将 vuex 存储传递给 vue-router 组件的主要内容,如果未能解决你的问题,请参考以下文章

在 beforeEach 期间将 vuex 模块状态传递给 vue-router

如何循环遍历传递给具有 Vuex 存储和计算属性的组件的对象数组?

vue & vuex getter vs 通过道具传递状态

Vuejs2.0构建一个彩票查询WebAPP

用VUE做网站后台

打字稿:引用 Vuex 存储模块会导致 VueJs 2.5 的命名空间错误