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-router
和vuex
。在这种情况下,我怎样才能使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