vue.js - Vue.js：在更改（删除，发布）后显示值而不重新加载页面

Question

我是 Vue 的新手，正在为培训创建一个待办事项列表。当我创建（发布）一个新项目时，所有已经创建的“元素”和新创建的“元素”都会出现，但没有值 {{todo.title}}、{{todo.body}} 出现并且不可见。只有当我刷新页面时，我才能看到出现的值。

编辑第 2 部分：我想我现在修好了。我更新了突变。在我目前的理解中，突变负责更新客户端状态。负责的操作负责服务器端/后端更新。我的理解正确吗？如果是这样，突变的方式是在不重新加载页面的情况下显示值的最佳实践吗？

Home.vue 已更新

<template>

<div class="container">

  <section class="hero is-link">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          Hello Dudes
        </h1>
        <h2 class="subtitle">
          Hamster ToDo List
        </h2>
      </div>
    </div>
  </section>

<section class="section">

  <nav class="level">
    <div class="level-item has-text-centered">
      <div>
        <p class="heading">All Tasks</p>
        <p class="title">{{getTotalTodos}}</p>
      </div>
    </div>
    <div class="level-item has-text-centered">
      <div>
        <p class="heading">Tasks has to be done</p>
        <p class="title">{{getTodosFalse}}</p>
      </div>
    </div>
    <div class="level-item has-text-centered">
      <div>
        <p class="heading">Tasks finished</p>
        <p class="title">{{getTodosTrue}}</p>
      </div>
    </div>
    <!-- <div class="level-item has-text-centered">
      <div>
        <p class="heading">Likes</p>
        <p class="title">789</p>
      </div>
    </div> -->
  </nav>
</section>


<section class="section">
  <div class="columns">
    <div class="column is-half">
      <strong>Add ToDo</strong>
      <div class="control">
      <input class="input is-info" v-model="todoTitle" type="text" placeholder="Add Task Title">
      <input class="input is-info" v-model="todoBody" type="text" placeholder="Add Task Body">
      <button class="button is-link" @click="addTodoItem({title: todoTitle, body: todoBody, done: false}); empyInput()">Add</button>
    </div>
    </div>
  </div>

  <div class="tabs is-small">
    <ul>
      <li class="is-active"><a>All Tasks </a></li> <span class="tag is-link">{{getTotalTodos}}</span>
      <li><a>Tasks still not done</a></li><span class="tag is-link">{{getTodosFalse}}</span>
      <li><a>Finished Tasks</a></li><span class="tag is-link">{{getTodosTrue}}</span>
      <!-- <li><a>Documents</a></li> -->
    </ul>
  </div>

  <article class="media" v-for="todo in todoItems" :key="todo.id">
    <figure class="media-left">
      <!-- <p class="image is-64x64">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </p> -->
    </figure>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>{{todo.title}}</strong>  
          <br>
            {{todo.body}}
        </p>
      </div>
      <nav class="level is-mobile">
        <div class="level-left">
          <a class="level-item">
            <span class="icon is-small"><i class="fas fa-edit"></i></span>
          </a>
          <a class="level-item">
            <span class="icon is-small"><i class="fas fa-check"></i></span>
          </a>
          <a class="level-item" @click="deleteTodoItem(todo.id)">
            <span class="icon is-small"><i class="fas fa-trash"></i></span>
          </a>
        </div>
      </nav>
    </div>
    <div class="media-right">
      <button class="delete" @click="deleteTodoItem(todo.id)"></button>
    </div>
  </article>


</section>

</div>


</template>


<script>
// @ is an alias to /src
import {mapGetters} from 'vuex';
import {mapActions} from 'vuex';


export default {
  name: 'Home',
  data() {
    return{
      todoTitle: '',
      todoBody: '',
    }
  },
  // updated() {
  //   this.$store.dispatch('getTodoItems');
  // },
  computed: {
   ...mapGetters(['todoItems', 'getTotalTodos', 'getTodosTrue', 'getTodosFalse']) 
  },
  methods: {
    ...mapActions(['addTodoItem', 'deleteTodoItem']),
    // addTodo() {
    //   return this.$store.actions.addTodoItem;
    empyInput() {
      this.todoTitle = '';
      this.todoBody = ''; 
    }
  }
}


</script>

商店更新

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todoItems: []
  },


  // Keep in mind that response is an HTTP response
  // returned by the Promise.
  // The mutations are in charge of updating the client state.
  mutations: {
    UPDATE_TODO_ITEMS (state, payload) {
      state.todoItems = payload;
    },
    ADD_TODO_ITEMS (state, payload) {
      state.todoItems.push(payload)
    },
    DELETE_TODO_ITEMS (state, payload) {
      state.todoItems.splice(payload, 1)
    },
  },

  actions: {
    getTodoItems ({ commit }) {
      axios.get('http://127.0.0.1:8000/api/').then((response) => {
        commit('UPDATE_TODO_ITEMS', response.data)
      });
    },
    addTodoItem ({ commit }, todoItem) {
      axios.post('http://127.0.0.1:8000/api/', todoItem).then((response) => {
        commit('ADD_TODO_ITEMS', response.data)
      });
    },
    deleteTodoItem ({ commit }, todoItemId) {
      axios.delete('http://127.0.0.1:8000/api/' + todoItemId + '/').then((response) => {
        commit('DELETE_TODO_ITEMS', response.data)
      });
    },   
  },

  getters: {
    todoItems: state => state.todoItems,
    getTotalTodos: state => state.todoItems.length,
    getTodosTrue: state => state.todoItems.filter(todo => todo.done).length,
    getTodosFalse: state => state.todoItems.filter(todo => !todo.done).length
  },

  modules: {
  }
})

标签： vue.jsvuejs2vue-componentvuex