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

日期：2020-05-11 栏目：程序人生浏览：次

import store from './store/index'

...
new Vue({
 el: '#app',
 router,
 store,
 components: {App},
 template: '<App/>'
})

在使用mutation的时候，我们是推荐大家把所有的行为常量保存到一个.js文件中，这样更有利于管理我们的项目，因为我们的mutation往往是需要使用action进一步封装的，这样我们在使用的时候，只需要修改常量对象里的属性值，就可以达到同时修改mutation和action的对应关系，一举两得，下面举例给大家参考：

//mutationType.js
export default {
 ADD_NEW_RECIPT:'ADD_NEW_RECIPT',
 CHANGE_CURR_TAB:'CHANGE_CURR_TAB'
}

//mutations.js
import mutationTypes from '@/store/mutationTypes.js'

const mutations = {
  [mutationTypes.ADD_NEW_RECIPT](state, item) {
   state.recipeList.push(item);
  },
  [mutationTypes.CHANGE_CURR_TAB](state, index) {
   state.currRecipe=index;
  }
 }
;
export default mutations

import mutationTypes from '@/store/mutationTypes.js'

const actions = {
 add_new_recipt:({commit,state}, type)=>{
  commit(mutationTypes.ADD_NEW_RECIPT,type);
 },
 change_curr_tab:({commit},index)=>{
  commit(mutationTypes.CHANGE_CURR_TAB,index)
 }
};

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，可以很有效的帮助我们追踪数据，定位错误。

转载注明出处：http://www.heiqu.com/85.html

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

相关推荐