创建一个基本的vuex流程
1、在项目中新建一个文件夹store 用来存入vuex创建的所有文件
文件夹中包函以下几块
文件名称
描述
store.js
定义初始变量，以及导出方法
如exprot default new Vuex.Store({state,actions,getters,muations})
actions.js
用于通过dispatch触发的方法
muations.js
用于接收actions 通过commit调用对应方法
getters.js
获取从store中的state中的派生出一些状态
下面代码将对应文件整合导出
import Vue from'vue' import Vuexfrom 'vuex' import actionsfrom '@/store/actions' import mutationsfrom '@/store/mutations' import gettersfrom '@/store/getters'; import detailfrom '@/store/detail/index';//导入detail模块通过 modules方法加载 Vue.use(Vuex); const state={ DetailList:"",//详情页面数据 HomeList:"",//首页数据 BannerTotal:"", HomeItem:"",//首页商品数据 preventRepeatReuqest:false, HomeItemTotal:1 }; export default new Vuex.Store({ state, actions, getters, mutations, modules:{ detail } })
其中modules包函了detail的子模块
detail.js同样包函 state,actions,getters,mutations
通过detail/index.js导出
注：index.js只做导出不需要new Vuex.Store
import actions from'./actions';//定义方法向mutation进行提交 import mutationsfrom './mutations';//获取actions传入的方法更新store里定义数据 import gettersfrom './getters';//获取store中的state中派生出一些状态 const state={ imgList:[], recommend:[], }; export default { state, actions, mutations, getters }
2在vue中获取vuex中的数据显示方法
improt {mapState,mapGetters} from ‘vuex’;
mapState 通过计算属性直接调用state中派生的一些状态
mapGetters 获取getters中的方法
方法一
computed:{
...mapState({//直接获取state派生状态
cates:(state)=>state.HomeList.cates,//直接获取store里的派生的一些状态
}),
...mapGetters({//获取getters中的方法
cates:’cates’
})
}
方法二不使用mapState与mapGetters
computed:{
cates(){
return this.$store.state.HomeList.cates;
},
cates(){
return this.$store.getters.cates;
}
}
3在vue中调用actions方法（actions中执行ajax）dispatch
例
在index.vue文件中调用actions中的Detail方法
created(){
let self=this;
self.$store.dispatch(‘Detail’);
}
在actions.js定认方法如下
export default{ Detail({commit}){ varargs={"imgList":[{"url":"aaa"},{"url":"bbb"}],"recommend":[{"title":"aaa"},{"title":"bbb"}]}; //获取数据成功之后调用muations中的GET_DETAIL方法 commit('GET_DETAIL',args); } }
例二调用ajax并且成之后获取当前vue的节点
self.$store.dispatch(‘HomeGetData’,0).then(()=>{//这里then使用es6 Promise
self.$nextTick(()=>{
//这里写操作DOM
})
})
actions.js中HomeGetData
HomeGetData({commit},id){//获取首页数据 letargs={"c":id,p:1}; return new Promise((resolve,reject)=>{ Vue.http.post(APP.home,args).then((res)=>{ res=res.body; commit('HEOM_LIST',res); resolve() }) }) },
如果不懂的可以加我QQ：1301257765 加QQ请注明原因
