Vue2 --- vuex的基本使用

vuex的用途

1. 实际开发中,只要是和后端请求数据的地方,使用vuex做异步数据流

1 api文件 负责写请求方法

import {getRequest} from "../../assets/js/utils/axios";
export function getNavData(){
    return getRequest(' http://vueshop.glbuys.com/api/home/index/nav?token=1ec949a15fb709370f')
}

2. 模块中的使用

//导入请求方法
import {getNavData,getBannerData} from "../../../api/index";
export default {
    //开启命名空间。作用是: 为了解决不同模块命名冲突的问题,之后在不同页面中引入getter、
    //actions、mutations时，需要加上所属的模块名。
    namespaced:true,
    state: {
        navData: [],
        bannerData: [],
    },
    mutations: {
        'set_navData'(state, payload){
            state.navData = payload.navData
        },
        'set_bannerData'(state,payload){
            state.bannerData = payload.bannerData
        }
    },
    actions: {
        getNav(conText){
            getNavData().then(res=>{
                if(res){
                    conText.commit('set_navData',{navData: res.data})
                }
            })
        },
       
        getBanner(conText,payload){
            getBannerData().then(res=>{
                if(res){
                    conText.commit('set_bannerData',{bannerData: res.data})
                    //执行自定义回调函数
                    if(payload.success){
                        payload.success();
                    }
                }
            })
        },
  
}

3. 在组件中获取store

computed: {
  ...mapState({
    //变量名称: state => state/模块名称/变量名称
    navData: state => state.index.navData,
    bannerData: state => state.index.bannerData
  })
}

4. 在组件中获取mutations

methods: {
    ...mapMutations({
        //方法名称: 模块名称/方法名称
        SELECT_ITEM:"goods/SELECT_ITEM"
    })
}

5. 在组件获取actions

methods: {
  ...mapActions({
    //方法名称: 模块名称/方法名称
    getNav: 'index/getNav',
    getBanner: 'index/getBanner',
  })
},

6. 注意点

6.1 在组件中获取vuex中的state,mutation，action,一定要先在组件里获取vuex辅助函数