Vuex，axios使用实例

请求接口地址：http://39.98.123.211/api/product/getBaseCategoryList

因为请求地址是远程的，也无法去配置，所以只能通过代理去解决跨域的问题
需要在vueconfig.js中配置

module.exports = {
    //关闭eslint
    lintOnSave:false,

    //代理跨域  只有浏览器有跨域问题  服务器之间没有
    devServer: {
        proxy: {
            '/api':{
                target:'http://39.98.123.211',
                //这里路径不需要重写，因为请求服务器上的路径就带api
                //pathRewrite: { '^/api':''},
            }
        }
    }
}

业务：通过请求地址获取商品分类，并存储状态中，然后通过状态管理展示给前端页面，从而实现3级分类联动

1.在商品分类组件TypeNav中，在mounted 中 dispatch给action

    //组件加载完毕，可以向服务器发送请求
    mounted(){
      //通知vuex发请求，获取数据，存储与仓库当中
      this.$store.dispatch('categoryList');
    },

2、根据返回类型在仓库新建一个接收数据的初始值，返回的是数组，就初始为空数组，空对象就初始为空对象

//state : 仓库存储数据的地方
const state = {
    //初始值 根据接口返回数据的类型
    categoryList:[],
};

3、在action中请求并获取数据，并commit给 mutations

//actions 处理actions,可以写自己的业务，也可以处理异步
const actions = {
    //通过api接口向服务器发送请求
    async categoryList(commit){
        let result = await reqCategoryList();
        //commit 向state提交数据，提交的数据就是获取到的数据
        if(result.code == 200){
            this.commit('CATEGORYLIST',result.data)
        }
    }
};

4.通过mutations修改状态中的数据

//mutations ：修改state的唯一手段
const mutations = {
    CATEGORYLIST(state,categoryList){
        state.categoryList = categoryList.slice(0,17);
    }
};

上面2-4都是在组件store/home/index.js上操作的，这也是vuex模块化操作的好处，不会和别的组件状态冲突。易于管理

5.在组件中获取仓库里的数据：

computed:{
      ...mapState({
            // 右侧需要的是一个函数，当模板使用计算属性的时候，右侧的函数会立即执行一次
            // 注入的参数state是大仓库中的数据
            categoryList: state => state.home.categoryList
        })
    },

至此，从通过发布请求，把请求响应的数据存入store中，从store中读取数据的流程就完成了，剩下就是把数据遍历在模板上展示即可