vue.js / Vue getter 未定义错误
vue.js / Vue getter not defined error
我的 App.vue 组件出现错误,getter:logged
<li id="shoppinglists" v-if="!logged">...
ERROR LOG: '[Vue warn]: Property or method "logged" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
我不明白为什么它被声明为未定义,因为我没有收到另一个定义的错误 getter:currentUserId
<li v-else id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li>
两者都被定义为计算道具:
<script>
import store from '@/vuex/store'
import { mapGetters } from 'vuex'
export default {
name: 'app',
computed: {
...mapGetters([
{ currentUserId: 'getCurrentUserId' },
{ logged: 'getCurrentUserStatus' }
])
},
store
}
</script>
我的 vex/getters.js 是:
vuex/getters.js
export default {
getCurrentUserStatus: state => state.logged,
getCurrentUserId: state => state.currentUserId,
...
}
我的商店是
vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
...
Vue.use(Vuex)
const state = {
logged: false,
currentUserId: '',
...
}
export default new Vuex.Store({
state,
getters,
...
})
如果您想使用不同名称的 getter,只需将对象传递给 ...mapGetters
所以语法是:
...mapGetters({
currentUserId: 'getCurrentUserId',
logged: 'getCurrentUserStatus'
})
我的 App.vue 组件出现错误,getter:logged
<li id="shoppinglists" v-if="!logged">...
ERROR LOG: '[Vue warn]: Property or method "logged" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
我不明白为什么它被声明为未定义,因为我没有收到另一个定义的错误 getter:currentUserId
<li v-else id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li>
两者都被定义为计算道具:
<script>
import store from '@/vuex/store'
import { mapGetters } from 'vuex'
export default {
name: 'app',
computed: {
...mapGetters([
{ currentUserId: 'getCurrentUserId' },
{ logged: 'getCurrentUserStatus' }
])
},
store
}
</script>
我的 vex/getters.js 是:
vuex/getters.js
export default {
getCurrentUserStatus: state => state.logged,
getCurrentUserId: state => state.currentUserId,
...
}
我的商店是
vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
...
Vue.use(Vuex)
const state = {
logged: false,
currentUserId: '',
...
}
export default new Vuex.Store({
state,
getters,
...
})
如果您想使用不同名称的 getter,只需将对象传递给 ...mapGetters
所以语法是:
...mapGetters({
currentUserId: 'getCurrentUserId',
logged: 'getCurrentUserStatus'
})