vue项目搭建以及全家桶的使用详细教程(小结)

export default actions

从上面的例子可以看出，action和mutation使用的是同一个常量表，可以更好的管理我们的修改动作，而不会出现对不上的错误；

最后，我们在组件内引入vuex中存放的state和action，如下

import {mapActions, mapState} from 'vuex'
...
computed: {
   ...mapState({
    recipeList: state => state.recipeList,
    currRecipe: state => state.currRecipe
   })
  },
methods: {
   ...mapActions([
    'add_new_recipt',
    'change_curr_tab'
   ]),
   addNewRecipt(type) {
    this.add_new_recipt(type)
   }
  }

这里是推荐大家按照例子中，使用mapActions和mapState以及利用三点扩展符来引入state 和action，state最好存放在组件的computed 属性内，这样当state中的数据发生改变的时候，也会实时的修改computed里定义的变量值，来实现数据的绑定，同时，当我们修改了某些数据的时候，也要同步到state中去，这样数据源才可以保持一致性与准确性；

总结

写这个的时候，只是给个思路去搭建自己的工程文件，并不是说把所有相关知识点都讲一遍，需要有一定的相关知识，不过相信还没自己搭建过工程文件的小伙伴会不知道如何去安排，可以参考参考，这里推荐大家安装chrome的扩展插件Vue.js devtools，可以很有效的帮助我们追踪数据，定位错误。