创建一个基本的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请注明原因