vuex - 未知的动作类型(无法发送我的动作)
vuex - unknown action type (can't dispatch my action)
我正在尝试将我的商店移动到单独的模块中,但不知道如何调度我的操作。我可以访问状态值,但不能访问操作。
记住这个项目我是专门为学习vue做的,所以我绝对是初学者。
src/store/store.js(作为我在商店文件夹中的索引)
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import posts from './modules/posts'
import comments from './modules/comments'
Vue.use(Vuex)
axios.defaults.baseURL = 'https://someapi.com/'
export default new Vuex.Store({
name: 'store',
namespaced: true,
modules: {
posts,
comments
},
})
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>
我尝试了最多的 "recommended" 我发现的修复,它正在改变
this.$store.dispatch('retrievePosts')
到
this.$store.dispatch('posts/retrievePosts')
但我在控制台上遇到同样的错误...
提前致谢!
这可能是因为您在 posts
模块中创建了另一个 Vuex 存储,您已将其作为模块添加到主 store.js
.
尝试将您的 posts
模块修改为以下内容。
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);
});
}
}
};
我正在尝试将我的商店移动到单独的模块中,但不知道如何调度我的操作。我可以访问状态值,但不能访问操作。
记住这个项目我是专门为学习vue做的,所以我绝对是初学者。
src/store/store.js(作为我在商店文件夹中的索引)
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import posts from './modules/posts'
import comments from './modules/comments'
Vue.use(Vuex)
axios.defaults.baseURL = 'https://someapi.com/'
export default new Vuex.Store({
name: 'store',
namespaced: true,
modules: {
posts,
comments
},
})
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>
我尝试了最多的 "recommended" 我发现的修复,它正在改变
this.$store.dispatch('retrievePosts')
到
this.$store.dispatch('posts/retrievePosts')
但我在控制台上遇到同样的错误...
提前致谢!
这可能是因为您在 posts
模块中创建了另一个 Vuex 存储,您已将其作为模块添加到主 store.js
.
尝试将您的 posts
模块修改为以下内容。
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);
});
}
}
};