Vue.js：删除评论的突变

Question

我一直在研究删除评论的功能，遇到了一个关于动作突变的问题。 这是我的客户：

delete_post_comment({post_id, comment_id} = {}) {
// DELETE /api/posts/:post_id/comments/:id
return this._delete_request({
  path: document.apiBasicUrl + '/posts/' + post_id + '/comments/' + comment_id,
 });
}

这是我的商店：

import Client from '../client/client';
import ClientAlert from '../client/client_alert';
import S_Helper from '../helpers/store_helper';

const state = {
 comment: {
  id: 0,
  body: '',
  deleted: false,
 },
 comments: [],
};

const actions = {
 deletePostComment({ params }) {
 // DELETE /api/posts/:post_id/comments/:id
 document.client
  .delete_post_comment({ params })
  .then(ca => {
    S_Helper.cmt_data(ca, 'delete_comment', this);
  })
  .catch(error => {
    ClientAlert.std_fail_with_err(error);
  });
 },
};

 delete_comment(context, id) {
 context.comment = comment.map(comment => {
   if (!!comment.id && comment.id === id) {
     comment.deleted = true;
     comment.body = '';
    }
  });
 },
};

export default {
 state,
 actions,
 mutations,
 getters,
};

我不太确定我是否正确地编写了我的突变。到目前为止，当我通过组件内部的on-click 调用操作时，什么都没有发生。

Answer 1

猜测你正在使用 vuex，流程应该是：

按照这个流程，在组件模板上

@click="buttonAction(someParams)"

vm 实例，方法对象：

buttonAction(someParams) {
    this.$store.dispatch('triggerActionMethod', { 'something_else': someParams })
}

vuex actions - 对逻辑使用动作，ajax 调用 ecc。

triggerActionMethod: ({commit}, params) => {
    commit('SOME_TRANSATION_NAME', params)
}

vuex mutations - 使用突变来改变你的状态

'SOME_TRANSATION_NAME' (state, data) { state.SOME_ARG = data }