Vuejs  2.0 教程:使用 vuex 重构项目代码

Vuejs 2.0 教程:使用 vuex 重构项目代码 QQ群:595928952 上一节

Vue js 2.0 教程 >> Vuejs 2.0 教程:使用 vuex 重构项目代码 视频发布于 2016-11-30

上个视频我们走完了整个 vuex 的基本流程,这个视频我们主要做的事就是使用 vuex 将之前的项目代码进行重构,比如我们之前实现的方法和一些组件,这样重构完成的项目才是一个常用的 SPA 架构的应用。
liudong0763

Jelly 你视频里的delete方法,后端删除的数据和前端删除的数据不一致

JellyBool

是的,像下面这为仁兄说的一样

博闻慎思

delete那个index 是 前端变量 列表的序号,删除几个之后,列表数量跟todo.id就不一样了,应该让删除按钮的那个index等于todo.id , 删除的时候服务器端是根据todo.id进行删除的

JellyBool

嗯哼,对的。。我看了一下确实是这样

liudong0763

我是这么弄得:

//Todos.vue
deleteTodo(todo,index){
                this.$store.dispatch('deleteTodo',{todo,index})
            }
//main.js
deleteTodo(store,obj){            
Vue.axios.delete('http://laravel.dev/api/todo/'+obj.todo.id+'/delete').then(response=>{
                store.commit('delete_todo',obj.index)
            })
        }
JellyBool

可以的,你可以考虑这样:

deleteTodo(store,payload){            
Vue.axios.delete('http://laravel.dev/api/todo/'+payload.todo.id+'/delete').then(response=>{
                store.commit('delete_todo',payload.index)
            })
        }

我个人觉得 obj 这种命名简直了

liudong0763

哈哈,简直什么啊,被你站点过滤了么?

JellyBool

没有,我只是不太赞同这种变量命名方式。变量是什么就是什么,按照规范和官方的推荐来就好

liudong0763

好的,这个好习惯要学习

hard88

终于等到更新啦哈哈

wl876645

辛苦啦。。。。请认真发评论哦,至少 6 个字符

524360073

vuex是不是可以这样理解:定义一个store然后把所有的共享变量存放在里面,并且对外提供读写操作接口。如果共享变量被改变,则通过dispatch通知各个组件。

a119347

可以出一个讲解用vuex设置登录页面的课程么

manpai

好久有空录个 小程序的教程系列嘛 相信这个会很火

JellyBool

没,因为我不会

chenxin
   deletetodo: function (index,todo) {
              this.$store.dispatch("removetodo",index,todo);
            },

dispatch传递两个参数我试了只能接收第一个,第二个接收不到,就算我换了顺序也一样...

JellyBool

写成 es6 的方式试试

chenxin

换了也一样.....

JellyBool

嗯,你看看上面的评论,应该可以先解决你的问题

chenxin

我都试过了!你们上面写的payload.index中的 payload是一个dispatch传过来的todo,但是用payload.index的时候我输出来直接输一个undefined.......

JellyBool

怎么会undefined...你仔细看看 liudong0763这个小伙伴的回复

chenxin

我现在的解决办法是将

 this.todos.splice(index,1);

写在了dispatch里面的,虽然也能实现一样的效果,但是 不是vuex的那种顺序了....

sfabric2016

感觉略麻烦,没有把vuex的特定或优势说出来

aviouy

不发源码上来看看么