我按照these instructions in the Vuex documentation从我的Vue组件访问Vuex状态...但是每当我在我的组件中使用 this.$store.something
时,我得到 TypeError: Cannot read property 'something' of undefined
(参见本文底部的截图) .
文件说,
通过向根实例提供商店选项,商店将被注入到根的所有子组件中,并且可以在它们上面使用 . $ store
...但该功能在我的应用程序中似乎不起作用 .
这是我的代码:
main.js
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store'
Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
store.js
import Vue from 'Vue'
import Vuex from 'vuex'
import router from './router'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
token: null
},
mutations: { // setters (synchronous)
setToken (state, userData) {
state.token = userData.token
},
clearToken (state) {
state.token = null
}
},
actions: { // asynchronous tasks
signup (authData) {
axios.post('/user/signup', {
email: authData.email,
password: authData.password
})
.then(res => {
if (res.status === 201) {
// what happens if signup succeeds?
} else {
// what happens if signup fails?
}
})
.catch(error => console.log(error))
},
setLogoutTimer ({commit}, expiresIn) {
setTimeout(() => {
commit('clearToken')
}, expiresIn * 1000)
},
login ({commit, dispatch}, authData) {
axios.post('/user/login', {
email: authData.email,
password: authData.password
})
.then(res => {
console.log(res)
// set token with timeout
const now = new Date()
const tokenExpiration = new Date(now.getTime() + res.data.expiresIn * 1000)
localStorage.setItem('token', res.data.token)
localStorage.setItem('tokenExpiration', tokenExpiration)
commit('setToken', { token: res.data.token })
dispatch('setLogoutTimer', res.data.expiresIn)
// redirect to dashboard
router.replace('/dashboard')
})
.catch(error => console.log(error))
},
tryAutoLogin ({commit}) {
const token = localStorage.getItem('token')
if (!token) {
return
}
const tokenExpiration = localStorage.getItem('tokenExpiration')
const now = new Date()
if (now >= tokenExpiration) {
return
}
commit('setToken', { token: token })
},
logout ({commit}) {
commit('clearToken')
localStorage.removeItem('token')
localStorage.removeItem('tokenExpiration')
router.replace('/login')
}
},
getters: {
isAuthenticated (state) {
return state.token !== null
}
}
})
App.vue
<template>
<div id="app">
<app-header/>
<router-view/>
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
name: 'App',
components: {
'app-header': Header
},
created () {
this.$store.dispatch('tryAutoLogin')
}
}
</script>
Header.vue
<template>
<header id="header">
<div class="logo">
<router-link to="/">Home</router-link>
</div>
<nav>
<ul>
<li v-if="!auth">
<router-link to="/signup">Sign Up</router-link>
</li>
<li v-if="!auth">
<router-link to="/login">Login</router-link>
</li>
<li v-if="auth">
<router-link to="/dashboard">Dashboard</router-link>
</li>
<li v-if="auth">
<a @click="onLogout">Logout</a>
</li>
</ul>
</nav>
</header>
</template>
<script>
export default {
computed: {
auth () {
return this.$store.state.token !== null
}
},
methods: {
onLogout () {
this.$store.dispatch('logout')
}
},
watch: {
$route () {
console.log('STORE: ', this.$store.state)
}
}
}
</script>
错误:
1 回答
你的代码中的一切看起来都很好 . 但是,在main.js文件中更改以下代码
至