VueX模块化命名

参考博客: https://blog.csdn.net/JHY97/article/details/124385960

 

 

api/index.js

//当前这个模块：API进行统一管理
import request from './request'
//发请求：axios发请求返回结果Promise对象
export const reqCategoryList = () =>
    request({ url: '/product/getBaseCategoryList', methods: 'get' });
​

store/index开启命名空间

import Vue from 'vue'
import Vuex from 'vuex'
import home from "./home/index"
import search from "./search/index"
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
  //  自定义模块命名1:模块名1,
  //自定义模块命名2:模块名2,
    homeStore:home,
    searchStore:search
  }
})
​

store/home/index.js

//home仓库
import { reqCategoryList } from "../../api/index"
const state = {};
const mutations = {};
const actions = {
    CategoryList(){
       let result =  reqCategoryList();
       console.log(result);
    }
}
​
export default {
 // 开启命名空间
    namespaced:true,
    state,
    mutations,
    actions
}

 

compomemts/TypeNav/index.vue使用数据

namespaced:true,开启命名路由

<template>
</template>
<script>
export default {
  name: "TypeNav",
  data() {
    return {};
  },
  activated() {},
  watch: {},
  created() {
   //this.$store.dispatch('自定义模块命名/actions中方法名', data)
this.$store.dispatch("homeStore/CategoryList","CategoryList");
  },
  mounted() {},
  methods: {},
};
</script>