vue.js - vue组件mapActions的方法提示Property or method "newNote" is not defined

问题描述

问 题

1、将getters和actions模板引入到store,

 import Vue from 'vue';
    import Vuex from 'vuex';
    import * as actions from './action';
    import * as getters from './getters'
    Vue.use(Vuex)
    const mutations = {
    //初始化state
    INIT_STORE(state,data){
        state.notes=data.notes;
        state.show = data.show;
        state.activeNote = data.activeNote;
    },
    //新增笔记
    NEW_NOTE(state){
        var newNote = {
            id:+new Date(),
            title:'',
            content:'',
            favorite:false
        };
        console.log(JSON.stringify(newNote));
        state.notes.push(newNote);
        state.activeNote = newNote;
    },
};
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

action.js中的代码如下：

import store from './store';
function makeAction(type){
    return ({commit},...args)=>commit(type,...args);
};/

/添加一个note对象
export const newNote = makeAction('NEW_NOTE');

getters.js中的代码如下

export const filteredNotes = (state)=>{
    if(state.show==="all"){
        return state.notes || {};
    }else if(state.show==="favorite"){
        return state.notes.filter(note=>note.favorite)||{};
    }
};
//获取列表展示状态：all or favorite
export const show = (state)=>{
    return state.show;
}
//获取当前激活note
export const activeNote = (state)=>{
    return state.activeNote;
}

2、将store引入到根组件中

import Vue from 'vue';
import App from './App'
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import store from './vuex/store';
Vue.use(VueResource);
Vue.use(VueRouter);
const router = new VueRouter({
  routes:[{
    path:'/index',
    component:{App}
  }]
});
new Vue({
  el:'#app',
  store,
  router,
  render:h=>h(App)
})

3、在组件Toolbar.vue中调用store中的方法

<template>
  <div id="toolbar">
    <i class="glyphicon logo"><img src="../assets/logo.png"/></i>
    <i  @click="newNote "class="glyphicon  glyphicon-plus"></i>
    <i :class="{starred:activeNote.favorite}" @click="toggleFavorite" class="glyphicon glyphicon-star">{{activeNote.favorite}}</i>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
    computed: {...mapGetters({
        activeNote: 'activeNote'
    })},
    methods: {...mapActions['newNote']}
}
</script>

4、

解决方案

...mapAction(["myAction"])

有个括号

这篇关于vue.js - vue组件mapActions的方法提示Property or method "newNote" is not defined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！