前端 - vuex2.0 使用问题

问题描述

问 题

今天初尝试2.0中的vuex，目录结构如下

vuex: 2.1.2
vue: 2.1.0

store.js内容：

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

Vue.use(Vuex)

import common from './common/store'

export default new Vuex.Store({
    modules : {
        common
    }
})

mutations-types.js 内容

export const ADD_NUM = "ADD_NUM"

common/store.js 内容

import * as types from '../mutations-types'

const state = {
    num : 1 
}

const mutations = {

    [types.ADD_NUM] : function(state){
        state.num = state.num + 1;
    },
}

export default {
    state,
    mutations
}

common/actions.js 内容:

import * as types from '../mutations-types'

export default {
    setNum : store => {
        store.dispatch(types.ADD_NUM)
    },
}

common/getters.js 内容:

export default {
    getNum : state => {
        state.common.num
    },
}

然后在Hello.vue中通过getters获取num的值

在vue入口文件中，注入了store

运行的时候就报

 Property or method "getNum" is not defined on the instance but referenced during render

小弟不太明白为什么会报这样的错了，望有心人解惑，谢谢

解决方案

import { mapGetters } from 'vuex'
 computed: {
    ...mapGetters(['getNum'])
 }

这篇关于前端 - vuex2.0 使用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！