vue vuex vue-resource构建应用逻辑问题

Question

有这么一个简单的流程问题，比如说页面上有5个div，我在页面上点击div的×可以删掉这个div，5个div是v-for渲染出来的都带有各自的index。点击删除只需要把点击的这个index传给vuex vuex对应删除这条数据即可。
用到vue-resource后，我点击后通过这个index找到对应的数据库里对应的数据，删除数据库的数据。现在页面上的四个div是应该像上面那样直接传index生成还是把数据库里4条div的数据拿到传回前端再给vuex渲染出来？谢谢指教

Answer 1

• 第一种可能：如果后端告诉你删除成功了，前端直接从state中干掉这个数据(建议)

• 第二种可能：如果后端告诉你删除成功了，同时返回你新的列表数据（相对于一要增加了网络传输数据量，增加后端sql操作）

• 第三种可能：如果后端告诉你删除成功了，你再从后端请求新的数据更新state，相对于一二，多了网络请求次数和sql操作）

Answer 2

都可以。

如果考虑需要减少请求次数的话，可以用vuex缓存起来。小项目就不用考虑那么多了

Answer 3

楼主描述的这个场景还是比较简单的。所以没必要把vuex等都混进来，用不着，反而混乱思路。
这个场景用一个组件来实现就够了。大概代码如下：

<div id='app'>
<div v-for="(item, index) in items" v-on:click='del(index)'>
  {{ item.text }}
</div>
</div>

var app = new Vue({
    el:'#app',
    data:{
        items:['1','2','3']
    },
    methods:{
        del:function(index){
            //ajax 请求删除index对应的item
        }
    }
});

vuex是在多个组件之间共享状态，才用的。vue－resource我没用过，好像可以用来发ajax什么的。

Answer 4

正常的逻辑处理

1. 删除走vuex action

2. 重新执行list封装的方法