如何在组件生命周期挂钩中访问vuex存储中的数据？例如，如果用户是管理员，则可以查看此页面，否则将用户重定向到另一个页面。以下是我的文件
请忽略代码中不相关的评论，不能发布大部分代码，我认为我不需要比现有更多的评论
我还想指定我处于vue和vuex
vuex.js的开头
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { // state
user: null
},
getters: { // geters
user: (state) => {
return state.user
}
},
actions: { // actions
user(context, user) {
context.commit('user', user)
}
},
mutations: { // mutations
user(state, user) {
state.user = user
}
}
})
管理员vue
<template>
<div class="container">
<!-- All these give back the user like this (based of what I store in user object)
{
"name": "Admin1",
"email": "email@test",
"role": "admin"
}
--->
{{ user }} <!-- displays object -->
{{ getUser1 }} <!-- displays object -->
{{ getUser2 }} <!-- displays object -->
{{ getUser3 }} <!-- displays object -->
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default ({
computed: {
...mapGetters(['user']),
getUser1() {
return this.user
},
getUser2() {
return this.$store.getters.user
},
getUser3() {
return this.$store.state.user
}
},
created() {
// All this statements give back null
console.log(this.user) // null
console.log(this.$store.state.user) // null
console.log(this.$store.getters.user) // null
console.log(this.getUser1) // null
console.log(this.getUser2) // null
console.log(this.getUser3) // null
}
// Same output in mounted()
})
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
import store from './vuex.js'
import './axios.js'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
从下面的片段中，您可以看到数据可以从created生命周期挂钩中获得(因此，"相当早"(。(此外，最好使用函数初始化Vuex存储状态。(
const initialState = () => ({
user: {
"name": "Admin1",
"email": "email@test",
"role": "admin"
},
})
const store = new Vuex.Store({
state: initialState(),
getters: {
getUser: (state) => state.user
},
})
new Vue({
el: "#app",
store,
data() {
return {
userBeforeCreate: null,
userAtCreated: null,
userBeforeMount: null,
userAtMounted: null,
}
},
computed: {
user() {
return this.$store.getters.getUser
},
},
beforeCreate() {
console.log("before create")
const user = Object.freeze({ ...this.user
})
this.userBeforeCreate = user
},
created() {
console.log("cretead")
const user = Object.freeze({ ...this.user
})
this.userAtCreated = user
},
beforeMount() {
console.log("before mount")
const user = Object.freeze({ ...this.user
})
this.userBeforeMount = user
},
mounted() {
console.log("mounted")
const user = Object.freeze({ ...this.user
})
this.userAtMounted = user
},
template: `
<div>
beforeCreate:
{{ userBeforeCreate }}
<hr />
created:
{{ userAtCreated }}
<hr />
beforeMount:
{{ userBeforeMount }}
<hr />
mounted:
{{ userAtMounted }}
<hr />
</div>
`
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>所以，我认为问题不在于getters不是"；准备好"；。
如果你的开始状态是null，那么你必须"；填充"；不知怎么的，最好的方法是dispatch——你计划做的action。
在您的示例代码中，没有任何东西是调度一个操作的——最终您可以使用getter获得null的开始状态。
const initialState = () => ({
user: null,
})
const store = new Vuex.Store({
state: initialState(),
mutations: {
SET_USER(state, data) {
state.user = data
},
},
actions: {
setUser({
commit
}, data) {
commit("SET_USER", data)
},
},
getters: {
getUser: ({
user
}) => user
},
})
new Vue({
el: "#app",
store,
data() {
return {
userAtCreated: null,
userToSet: {
"name": "Admin1",
"email": "email@test",
"role": "admin"
},
}
},
created() {
// calling the method that dispatches the action
this.setUser()
this.userAtCreated = this.$store.getters.getUser
},
methods: {
setUser() {
// dispatching action here
this.$store.dispatch("setUser", this.userToSet)
}
},
template: `
<div>
USER IN STORE:<br />
{{ userAtCreated }}
<hr />
</div>
`
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>建议：不要给mutations、actions、state项目&getters同名。这可能会把事情搞砸(至少在你思考/谈论它们的时候(。
另一方面，如果您正在使用axios来获取数据&如果只将操作分派到其他地方，那么在created()getter返回null可能是有意义的：在调用created()时，数据可能根本没有到达。