VueX模块化命名

2022-05-09 19:00:08 阅读：197 来源： 互联网

标签：index const 模块化模块 home 命名 import 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>

标签：index,const,模块化,模块,home,命名,import,VueX
来源： https://www.cnblogs.com/ajaXJson/p/16250429.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VueX模块化命名