Question

我正在尝试使用vuex在数据库中插入标题，但是遇到错误。

据我所知，我正确地调用了该操作，但是从我所读到的内容来看，idk为什么会给我错误，这与 namespacing

有关

[vuex]未知操作类型：ADD_ARTICLE

    <template>
      <section>
        <v-container fluid>
          <v-card raised></v-card>
          <v-card raised style="margin-top:10px">
            <v-card-text class="headline font-weight-black">
              <v-layout>
                <v-row align-content="center">
                  <v-col>
                    TITLE
                    {{title}}
                    <v-text-field
                      v-model="title"
                      filled
                      placeholder="Provide a Title for the article"
                      prepend-icon="title"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-layout>

              <v-layout align-end justify-end>
                <v-btn color="red white--text" style="margin:10px" @click="passToDB">SUBMIT</v-btn>
              </v-layout>
            </v-card-text>
          </v-card>
        </v-container>
      </section>
    </template>

    <script>
    import { mapActions } from "vuex";
    export default {
      data() {
        return {
          title: ""
        };
      },
      methods: {
        ...mapActions(["ADD_ARTICLE"]),
        passToDB() {
          this.ADD_ARTICLE(this.title);
        }
      }
    };
    </script>

这是文章模块，我将在其中导出到store.js

     import axios from 'axios';

    //state
    const state = {
        articles: []
    };
    //getters
    const getters = {
        allArticles: (state) => state.articles
    }
    //mutations
    const mutations = {
        RETRIEVE_ARTICLES: (state, articles) => (state.articles = articles),
        ADD_ARTICLE: (state, article) => state.articles.push(article)
    };
    //actions
    const actions = {
        //retrieve articles in server
        async loadArticles({ commit }) {
            const response = await axios.get('http://localhost:9001/article/articles');
            commit('RETRIEVE_ARTICLES', response.data);
        },
        async addArticle({ commit }, TITLE) {
            const response = await axios.post('http://localhost:9001/article/add', {
                TITLE: TITLE
            });
            commit('ADD_ARTICLE', response.data)
        }
    };
    //export 
    export default {
        state,
        getters,
        actions,
        mutations
    };


here is my store.js 

        import Vue from 'vue';
    import Vuex from 'vuex';
    import login from './modules/login';
    import article from './modules/article';
    Vue.use(Vuex)

    export default new Vuex.Store({
      //import modules 
      modules: {
        login,
        article
      }
    });

Answer 1

在商店中，您声明了一个addArticle动作，但是您正在导入ADD_ARTICLE。

您只需要这样更改即可：

  import { mapActions } from "vuex";
    export default {
      data() {
        return {
          title: ""
        };
      },
      methods: {
        ...mapActions(["addArticle"]),
        passToDB() {
          this.addArticle(this.title);
        }
      }
    };

@Eugen Govorun指出，默认情况下，namespacing已关闭。如果您通过执行以下操作将其打开：

    export default {
        state,
        getters,
        actions,
        mutations,
        namespaced: true
    };

您将通过以下方式使用自己的操作：

  import { mapActions } from "vuex";
    export default {
      data() {
        return {
          title: ""
        };
      },
      methods: {
        ...mapActions("article", ["addArticle"]),
        passToDB() {
          this.addArticle(this.title);
        }
      }
    };

因为要导入名称为article的模块。

Answer 2

默认情况下，命名空间已关闭。您的文章模块中没有ADD_ARTICLE操作。只是用这样的名字突变。您的动作名称实际上是addArticle。

vuex未知操作类型：ADD_ARTICLE

2 个答案: