src/strore/index.js

import { createStore } from "vuex";
// 导入持久化插件
import createPersistedstate from "vuex-persistedstate";
import user from "./modules/user";
import cart from "./modules/cart";
import cartegory from "./modules/category";
export default createStore({
  // 分模块
  modules: {
    user,
    cart,
    cartegory,
  },
  plugins: [
    createPersistedstate({
      key: "erabbit-client-pc-store",
      paths: ["user", "cart"],
    }),
  ],
});

App.vue

<template>
  <div id="container">
    <!-- 1、使用A模块的state数据 -->
    <p>{{ $store.state.moduleA.username }}</p>
    <!-- 2、使用A模块的getters数据 -->
    <p>{{ $store.getters.newName }}</p>

    <!-- 1、使用B模块的state数据 -->
    <p>{{ $store.state.moduleB.username }}</p>
    <!-- 2、使用B模块的getters数据 $store.getters['模块名/计算属性']-->
    <p>{{ $store.getters["moduleB/newName"] }}</p>
    <button @click="mutationsFn">mutationsFn</button>
    <button @click="actionsFn">actionsFn</button>
    <p>{{ $store.state.moduleB.age }}</p>
  </div>
</template>
<script>
import { useStore } from "vuex";
export default {
  name: "App",
  setup() {
    // userStore可以拿到vuex仓库实例
    const store = useStore();
    // 1、使用moduleA模块state的数据
    console.log(store);
    console.log(store.state.moduleA.username); // moduleA
    // 2、使用moduleA模块getters的数据
    console.log(store.getters.newName); // moduleA!!!!

    // 1、使用moduleB模块getters的数据
    console.log(store.getters["moduleB/newName"]); // moduleB???

    const mutationsFn = () => {
      // 提交B模块的更改
      store.commit('moduleB/updateName')
    };
    const actionsFn = () => {
      // 传参用法
      store.dispatch("moduleB/updateName", 6)
    };
    return {
      mutationsFn,
      actionsFn,
    };
  },
};
</script>
<style lang='less' scoped>
</style>

此时有一个需求，vuex的user模块里存储了用户的一些信息，其中的token想要在请求拦截器里使用（vuex我已经实现了数据持久化）

思考：
createStore 于 useStore 可能创造的是同一个实例。

1、因此可以在request.js里引入useStore方法，然后来访问user模块的一些用户数据

2、也可以直接导入 store/index.js 直接使用store。

// 1. 创建一个新的axios实例
// 2. 请求拦截器，如果有token进行头部携带
// 3. 响应拦截器：1. 剥离无效数据  2. 处理token失效
// 4. 导出一个函数，调用当前的axsio实例发请求，返回值promise
import axios from 'axios'
import store from '@/store';
// 导出基准地址，原因其他地方也有可能用到基准路径，eg: 图片
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const API = axios.create({
  baseURL: baseURL,
  timeout: 5000
});
// Add a request interceptor
API.interceptors.request.use(
  function (config) {
    // 拦截业务逻辑
    const { profile } = store.state.user
    if(profile.token) {
      config.headers.Authorization = `Bearer${profile.token}`
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);