如何使用 vuex 自动刷新帖子列表？

Question

我正在做一个像 SPA 一样打开 Laravel 和 Vuejs 的项目。在管理 posts 的管理页面上，我使用 vuex 和 axios 请求在数据库中呈现 posts 的列表。我有一个删除 post.

的按钮

但是当我删除 post 时，列表不会刷新，我需要手动刷新页面。为什么 vuex 不刷新状态？

backend/post/index.vue

<template>
  <div class="post-index">
    <h1>All Posts</h1>
    <router-link :to="{ name: 'posts.create' }" class="nav-link" active-class="active">
      <p class="new-post-btn">
        Créer Un nouveau Guide
      </p>
    </router-link>

    <table class="table post-table">
      <thead>
        <tr>
          <th scope="col">
            #
          </th>
          <th scope="col">
            Title
          </th>
          <th scope="col">
            Is Publish
          </th>
          <th scope="col">
            Create At
          </th>
          <th scope="col">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="guide in guides.post" v-bind:key="getPosts">
          <th scope="row">
            {{ guide.id }}
          </th>
          <th>{{ guide.title }}</th>
          <th>{{ guide.is_publish }}</th>
          <th>{{ guide.created_at }}</th>
          <th>
            <i class="fas fa-times" />
            <button class="edit-button">
              <router-link :to="{ name: 'posts.create' }">
                <fa icon="edit" fixed-width />
              </router-link>
            </button>
            <button class="delete-button" @click="deletePost(guide.id)">
              <fa icon="times" fixed-width />
            </button>
            <button class="publish-button">
              <fa icon="paper-plane" fixed-width />
            </button>
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import axios from 'axios'

export default {

  data () {
    return {
      guides: null
    }
  },

  computed: {
    ...mapGetters({
      posts: 'post/post'
    })
  },

  beforeCreate () {
    this.$store.dispatch('post/fetchPosts')
  },

  created () {
    this.getPosts()
  },

  methods: {
    getPosts () {
      this.guides = this.$store.state.post
    },
    deletePost (postId) {
      this.$store.commit('DELETE_POST', postId)
    }
  }
}
</script>

store/module/post.js

    import axios from 'axios'
import * as types from '../mutation-types'

// State
export const state = {
  post: null
}

// Getters
export const getters = {
  post: state => state.post
}

export const mutations = {
  [types.SAVE_POST] (state, { post }) {
    axios.post('/api/posts/store', {
      post
    })
    state.post = post
  },

  [types.DELETE_POST] (state, id) {
    var index = state.post.findIndex(p => p.id === id)
    state.post.splice(index, 1)
  },

  [types.FETCH_POST_SUCCESS] (state, { post }) {
    state.post = post
  },

  [types.FETCH_POST_FAILURE] (state) {
    state.post = null
  }
}

export const actions = {

  savePost ({ commit, dispatch }, payload) {
    commit(types.SAVE_POST, payload)
  },

  async fetchPosts ({ commit }) {
    try {
      const { data } = await axios.get('/api/posts/index')
      console.log(data)
      commit(types.FETCH_POST_SUCCESS, { post: data })
    } catch (e) {
      commit(types.FETCH_POST_FAILURE)
    }
  },

  deletePost ({ commit }, post) {
    axios.delete('/api/posts/delete/' + post.id)
      .then(function () {
        commit(types.DELETE_POST, post)
      })
  }
}

有没有更好的办法？

Answer 1

问题出在您定义 fetchPosts 和句柄 DELETE_POST 的地方。

要修复它，请确保提交 DELETE_POST 会重新加载或删除 this.$store.state.post 中的特定元素。

然后计算 mapGetters 应该会自动刷新您的帖子。

Answer 2

我解决了我的问题，store 是正确的，但是在我的组件中用 vuejs 的钩子调用 store 是一个错误。

如何使用 vuex 自动刷新帖子列表？

How to refresh automaticaly a list of posts with vuex?

javascript

crud

laravel

vue.js

vuex