Vue.js vuex-未知操作类型（无法分派我的操作）

我试图将我的商店移动到单独的模块中，但不知道如何分派我的操作。我可以访问状态值，但不能访问操作

请记住，我所做的这个项目完全是为了学习vue，所以我肯定是这里的初学者

src/store/store.js（作为存储文件夹中的我的索引）

src/store/modules/posts.js

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

Vue.use(Vuex)
axios.defaults.baseURL = 'https://someapi.com/'

export default new Vuex.Store({
    name: 'posts',
    state: {
        posts: [],
        post: {}
    },
    mutations: {
        retrievePosts(state, posts){
            state.posts = posts
        },
        retrievePost(state, post){
            state.post = post
        },
    },
    actions: {
        retrievePosts (context) {
            axios.get('/blog/post/all')
                .then(response => {
                    var posts = response.data.data
                    context.commit('retrievePosts', posts)
                })
                .catch(error => {
                    console.log(error)
                })
            },
            retrievePost (context, slug) {
                axios.get('/blog/post/all')
                    .then(response => {
                        var post = response.data.data[1]
                        context.commit('retrievePost', post)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
    }

})

src/components/BlogPostList.vue

<template>
    <div class="postList">
        <b-container v-for="post in this.$store.state.posts.posts" :key="post.id" class="post">
            <b-row>
                <b-col>
                    <h1><a :href="'post/' + post.slug">{{ post.title }}</a></h1>
                </b-col>
            </b-row>
            <b-row>
                <b-col cols="10">
                    <h4>{{ post.subtitle }}</h4>
                </b-col>
                <b-col>
                    <small>by {{ post.author_id }} </small>
                </b-col>
            </b-row>
            <b-row>
                <b-col>
                    <!-- <p v-html="post.body.substring(0, 1000) + '...'"></p> -->
                    <span class="post-text" v-html="post.body"/>
                </b-col>
            </b-row>
            <br />
            <b-row>
                <b-col>
                    <dx-button style="float:right"
                        text="read more"
                        @click="buttonClicked" 
                    />
                </b-col>
            </b-row>
            <hr>
        </b-container>
    </div>
</template>

<script>
import DxButton from "devextreme-vue/button";

export default  {
    components: {
        DxButton
    },
    name: 'BlogPostList',
    created () {
        this.$store.dispatch('retrievePosts')
    },
    methods: {
        buttonClicked: function() {
            alert("The Button was clicked");
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.postList {
    h1 {
        font-size: 50px;
    }
    .post-text {
        text-align: justify;
    }
}
</style>

到

但我在控制台上得到了相同的错误

---

提前谢谢

这可能是因为您在

posts

模块中创建了另一个Vuex存储，并将其作为模块添加到主

store.js

中

尝试将

POST

模块修改为以下内容

import axios from 'axios';

axios.defaults.baseURL = 'https://someapi.com/';

export default {
  name: 'posts',
  state: {
    posts: [],
    post: {}
  },
  mutations: {
    retrievePosts(state, posts) {
      state.posts = posts;
    },
    retrievePost(state, post) {
      state.post = post;
    }
  },
  actions: {
    retrievePosts(context) {
      axios
        .get('/blog/post/all')
        .then((response) => {
          var posts = response.data.data;
          context.commit('retrievePosts', posts);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    retrievePost(context, slug) {
      axios
        .get('/blog/post/all')
        .then((response) => {
          var post = response.data.data[1];
          context.commit('retrievePost', post);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
};

---

这可能是因为您在

posts

模块中创建了另一个Vuex存储，并将其作为模块添加到主

store.js

中

尝试将

POST

模块修改为以下内容

import axios from 'axios';

axios.defaults.baseURL = 'https://someapi.com/';

export default {
  name: 'posts',
  state: {
    posts: [],
    post: {}
  },
  mutations: {
    retrievePosts(state, posts) {
      state.posts = posts;
    },
    retrievePost(state, post) {
      state.post = post;
    }
  },
  actions: {
    retrievePosts(context) {
      axios
        .get('/blog/post/all')
        .then((response) => {
          var posts = response.data.data;
          context.commit('retrievePosts', posts);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    retrievePost(context, slug) {
      axios
        .get('/blog/post/all')
        .then((response) => {
          var post = response.data.data[1];
          context.commit('retrievePost', post);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
};

---

我真的说不出我在这里错过了什么…我真的说不出我在这里错过了什么…啊，这很有效！我不知道我必须简单地导出它。谢谢@埃里克，不客气。我一直在一个中央商店下导入多个模块，以前从未遇到过这个问题。这就是为什么我怀疑这可能是原因。啊，这是有效的！我不知道我必须简单地导出它。谢谢@埃里克，不客气。我一直在一个中央商店下导入多个模块，以前从未遇到过这个问题。这就是为什么我怀疑这可能是原因。

this.$store.dispatch('posts/retrievePosts')

import axios from 'axios';

axios.defaults.baseURL = 'https://someapi.com/';

export default {
  name: 'posts',
  state: {
    posts: [],
    post: {}
  },
  mutations: {
    retrievePosts(state, posts) {
      state.posts = posts;
    },
    retrievePost(state, post) {
      state.post = post;
    }
  },
  actions: {
    retrievePosts(context) {
      axios
        .get('/blog/post/all')
        .then((response) => {
          var posts = response.data.data;
          context.commit('retrievePosts', posts);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    retrievePost(context, slug) {
      axios
        .get('/blog/post/all')
        .then((response) => {
          var post = response.data.data[1];
          context.commit('retrievePost', post);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
};