// index.pug
body
#app
view-posts
/code>
// Главный js файл: index.js
<code lang="javascript">
import './js/common.js'
import './assets/css/main.css'
import './assets/scss/main.scss'
import regeneratorRuntime from "regenerator-runtime"
window.Vue = require('vue')
import store from './store'
Vue.component('view-posts', require('./components/posts.vue').default)
const app = new Vue({
store,
el: '#app'
});
</code>
// Компонент Vue: posts.vue
<code>
<template lang="pug">
div
h1.title {{ getPostsCount }} posts
.post(v-for="post in getPosts" :key="post.id")
h2 {{post.title}}
p {{post.body}}
</template>
</code>
<code lang="javascript">
<script>
import {mapGetters, mapActions} from 'vuex';
export default {
computed: mapGetters(["getPosts", "getPostsCount"]),
method: mapActions(['fetchPosts']),
async mounted() {this.fetchPosts} // Здесь я также пытаюсь передать значение в actions через this.fetchPosts(значение) , но это выдаёт ошибку в консоли "Error in mounted hook (Promise/async): "TypeError: _this.fetchPosts is not a function""
}
</script>
</code>
// Vuex store
// Index.js
<code lang="javascript">
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import posts from './modules/posts'
export default new Vuex.Store({
modules: {
posts,
}
})
</code>
//Posts.js
<code lang="javascript">
export default {
state: {
allPosts: []
},
actions: {
async fetchPosts(ctx, limit = 5) { // в limit хочу передавать значение из vue
const res = await fetch('https://jsonplaceholder.typicode.com/posts&_limit=' + limit);
const posts = await res.json();
ctx.commit('mutatePosts', posts)
}
},
mutations: {
mutatePosts(state, posts) {
state.allPosts = posts
}
},
getters: {
getPosts(state) {
return state.allPosts
},
getPostsCount(state) {
return state.allPosts.length
}
}
}
</code>
</spoiler>
Средний