Vue3 路由

一、安装路由

• 官网：https://v3.cn.vuejs.org/guide/routing.html
• 官网手册：https://next.router.vuejs.org/zh/

1、创建新项目

# 1、创建一个项目
vue create vuecli

# 2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
# 2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
# 2.2、eslint 语法检查，约束你的代码习惯
please pick a preset：
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

# 3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors、Router、Vuex
Check the features needed for your project:
  Choose Vue version                  // 版本
  Babel                               // 把es6的语法，转成es5的语法，可以做到兼容
  TypeScript                          // 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持es6语法
  Progressive Web App (PWA) Support   // Web APP开发
  Router                              // 路由
  Vuex                                // 状态管理器
  CSS Pre-processors                  // css预处理器：三种流行的CSS预处理器：Sass、LESS 和 Stylus
  Linter / Formatter                  // 语法检查器(eslint)
  Unit Testing                        // 单元测试
  E2E Testing                         // e2e(端到端)测试

# 4、选择版本：3.x
Choose a version of Vue.js that you want to start the project with:
  2.x
  3.x

# 5、选择路由：Yes 路由有2种模式：hash路由、history路由(历史路由)
Use history mode for router? (Requires proper server setup for index fallback in production)
    y
    n

# 5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/Scss (with node-sass)
  Less
  Stylus

# 6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
  In dedicated config files   // 独立配置文件
  In package.json             // 放在package.json里

# 7、是否保持此项目配置：保存的话，起个名字
Save this as a preset for future projects?
  y   // 保存
  n   // 不保存


# 8、安装完成后，会在package.json文件中的dependencies参数中，增加vue-router(路由)、vuex(状态管理)
# 9、增加路由配置目录：`src/router`
# 10、新增页面目录：`src/views`

2、关闭语法检查器(eslint)

# 新建/vue.config.js文件
module.exports = {
    // 关闭eslint检查
    lintOnSave: false,
    devServer: {
        overlay: {
            warnings: false, //不显示警告
            errors: false, //不显示错误
        }
    }
};

---

二、路由介绍（Vue Route）

• 跳转到当前页面前，进行操作
• 离开当前页面后，进行操作
• 路径名称，别名
• 获取url：完整url，不带域名url
• url上的参数

---

三、路由操作

1、配置新路由

# 1、主入口文件：main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'   // 这个完整路径是 './router/index.js'，省略了index.js，也可以改变这个文件，比如a.js，就需要配置了
import store from './store'     // 这个完整路径是 './store/index.js'

createApp(App).use(store).use(router).mount('#app')


# 2、路由文件：router/index.js
# 2.1、引入vue路由，使用 createRouter, createWebHistory 方法
// 还可以引入createWebHashHistory，hash模式路由
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

# 2.4、定义多个页面的指向，可以直接把这里的数据，放到 router 变量里。写100个就要加100个
# 2.4.1、path 是url路径，域名后面的路径，不要重复
# 2.4.2、name 页面起个名字，通过名字可以找到组件，不要重名
# 2.4.3、component 页面路径，2种引入方式，先创建2个页面
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes  # 2.3、这个就是上面的变量，数据应该是 routes:routes，es6写法省略了一个。
})
# 2.2、export default 输出 router 变量，谁引用这个文件，就使用这个变量
export default router


# 3、新增 src/views/User.vue 文件
<template>
    <div>
        <h1>这是用户中心页面</h1>
    </div>
</template>
<script>
export default {
    name: "User",
};
</script>


# 4、新增 src/views/Course.vue 文件
<template>
    <div>
        <h1>这是课程列表页面</h1>
    </div>
</template>
<script>
export default {
    name: "Course",
};
</script>


# 5、配置页面路由
# 5.1、component: () => import('../views/About.vue') ，懒加载模式，每个vue文件，单独打包一个js。
  建议用这个：https://v3.cn.vuejs.org/guide/ssr/routing.html#%E4%BB%A3%E7%A0%81%E5%88%86%E7%A6%BB
# 5.2、component: User，引入vue文件，在使用。这个会把所有vue文件的js打包在一个文件
import User from '../views/Course.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    },
    {
        path: '/user',
        name: 'User',
        component: User
    },
    {
        path: '/course',
        name: 'Course',
        component: () => import('../views/Course.vue')
    }
]

# 5.3、可以打包看一下js文件的数量：yarn build
# 5.4、访问新页面 localhost:8080/user、localhost:8080/course


# 6、hash模式：createWebHashHistory
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
const router = createRouter({
    // history: createWebHistory(process.env.BASE_URL),
    history: createWebHashHistory(process.env.BASE_URL),    // 用hash方法
    routes
})
# 6.1、访问路径就会多个#号 localhost:8080/#/user、localhost:8080/#/course

2、使用路由

# 1、App.vue文件：使用路由
<template>
    <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">帮助中心</router-link> |
        <router-link to="/course">课程列表</router-link> |
        <router-link to="/user">个人中心</router-link>
    </div>
    <router-view />
</template>


# 2、样式
<style>
    #nav a.router-link-exact-active {
        color: red;
    }
</style>

# 3、a标签也能跳转路由，但不建议使用
# 3.1、router-link标签，vue渲染以后，就是a标签。
# 3.2、router-link标签 使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码
<template>
    <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">帮助中心</router-link> |
        <router-link to="/course">课程列表</router-link> |
        <a href="/user">个人中心</a>
    </div>
    # 4、router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局
    <router-view />
</template>

3、路由全局变量

• $route 获取当前路由
• $router 获取当前路由器，分发器：可以进行页面跳转

<template>
    <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">帮助中心</router-link> |
        <router-link to="/course">课程列表</router-link> |
        # 1、标签 `$route` 获取当前路由
        <a href="/user" :class="{active:$route.path=='/user'}">个人中心</a>
        # 2、标签跳转 `$router` 获取当前路由器，分发器：可以进行页面跳转
        <button @click="$router.push('/course')">跳转</button>
    </div>
    <router-view />
</template>
<style>
.active {
    color: red !important;
}
</style>


# 3、方法跳转
<template>
    <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">帮助中心</router-link> |
        <router-link to="/course">课程列表</router-link> |
        <a href="/user" :class="{active:$route.path=='/user'}">个人中心</a>
        <button @click="go_url('/course')">跳转</button>
    </div>
    <router-view />
</template>
<script>
export default {
    methods: {
        go_url(url) {
            // 这样会报错的，要加上 this 当前
            // $router.push(url);

            this.$router.push(url);
            // 查看当前路由的信息
            console.log(this.$route);
        }
    }
};
</script>

// router-link 标签，可以更改
// router-view 标签，不能更改。将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局

4、嵌套路由(子路由)

# 1、新增 src/views/Userinfo.vue 文件
<template>
    <div>
        <h1>这是用户 个人信息页面</h1>
    </div>
</template>

# 2、新增 src/views/Userconfig.vue 文件
<template>
    <div>
        <h1>这是用户 个人配置页面</h1>
    </div>
</template>

# 3、User.vue 文件，创建个人中心样式
<template>
    <div>
        <h1>这是个人中心页面</h1>
        <div class="menu">
            <ul>
                <li>
                    <router-link to="/user/config">个人设置</router-link>
                </li>
                <li>
                    <router-link to="/user/info">个人信息</router-link>
                </li>
            </ul>
        </div>
        <div class="main">
            <router-view />
        </div>
    </div>
</template>
<style scoped>
.menu {
    width: 30%;
    height: 300px;
    float: left;
    background: #42b983;
}
.main {
    width: 65%;
    height: 300px;
    float: right;
    background: #aaaaaa;
}
a {
    font-weight: bold;
    color: #2c3e50;
}
.router-link-exact-active {
    color: red;
}
</style>

# 4、router/index.js
# 4.1、配置嵌套路由(子路由)，在父路由里，增加 children 参数
const routes = [
    {
        path: "/",
        name: "Home",
        component: Home
    },
    {
        path: "/about",
        name: "About",
        component: () => import("../views/About.vue")
    },
    {
        path: "/user",
        name: "User",
        component: () => import("../views/User.vue"),
        children: [
            {
                // 子路由的path，没有/
                path: "config",
                name: "Userconfig",
                component: () => import("../views/Userconfig.vue")
            },
            {
                path: "info",
                name: "Userinfo",
                component: () => import("../views/Userinfo.vue")
            }
        ]
    },
    {
        path: "/course",
        name: "Course",
        component: () => import("../views/Course.vue")
    }
];

5、动态路由

# 1、router/index.js
# 1.1、路径参数 用冒号 : 表示
{
    path: "/course/:id",
    name: "Course",
    component: () => import("../views/Course.vue"),
}

# 2、访问url
localhost:8080/course/10
localhost:8080/course   // 这样就不能访问了

# 3、获取参数
# 3.1、当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来
<template>
    <div>
        <h1>这是课程列表页面</h1>
        # 3.2、路由配置的是id，接收key就是id。 配置的是uid，接收的key就是uid
        {{ $route.params.id }}
        # 3.3、js 获取参数
        {{ one() }}
    </div>
</template>
<script>
export default {
    methods: {
        one() {
            // 3.3.1、js 获取参数
            console.log(this.$route.params.id);
        }
    }
};
</script>

# 4、传值：根据路由配置
<template>
    <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">帮助中心</router-link> |
        <router-link to="/course/200">课程列表</router-link> |
        <router-link to="/user">个人中心</router-link>
    </div>
    <router-view />
</template>

# 5、App.vue文件 传值：常规传值(get) ?uid=100&name=ouyangke
<template>
    <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">帮助中心</router-link> |
        <router-link to="/course/200">课程列表</router-link> |
        <router-link to="/user?uid=100&name=ouyangke">个人中心</router-link>
    </div>
    <router-view />
</template>
# 5.1、User.vue文件 接收：常规传值(get)
<template>
    <div>
        <h1>这是 {{ $route.query.name }} 个人中心页面</h1>
        <div class="menu">
        <ul>
            <li>
                <router-link to="/user/config">个人设置</router-link>
            </li>
            <li>
                <router-link to="/user/info">个人信息</router-link>
            </li>
        </ul>
        </div>
        <div class="main">
            <router-view />
        </div>
    </div>
</template>
# 5.2、App.vue文件 传值：js传值
<template>
    <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">帮助中心</router-link> |
        <router-link to="/course/200">课程列表</router-link> |
        <router-link to="/user?uid=100&name=ouyangke">个人中心</router-link>
        // 创建按钮，使用click事件
        <button @click="go_url()">课程详情</button>
    </div>
    <router-view />
</template>
<script>
export default {
    methods: {
        go_url() {
            // 传值
            this.$router.push({
                path: "/user/info",
                query: { uid: 100, name: "欧阳克" }
            });
            // 不传值
            this.$router.push("/user/info");
        }
    }
};
</script>

6、重定向、别名

# 1、redirect 重定向，跳转到哪个路径下
# 1.1、访问：localhost:8080/home，会跳转到首页
const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/home",
        name: "home",
        redirect: "/",
    }
];


# 2、对象写法
# 2.1、访问：localhost:8080/home，会跳转到/about页面
const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/about",
        name: "About",
        component: () => import("../views/About.vue"),
    },
    {
        path: "/home",
        name: "home",
        redirect: {name : "About" }
    }
];


# 3、方法 传值
# 3.1、访问：localhost:8080/home，会跳转到/user页面
const routes = [
      {
          path: "/",
          name: "Home",
          component: Home,
      },
      {
          path: "/home",
          name: "home",
          redirect: (to) => {
              // 方法接收目标路由作为参数 to.params
              // return 重定向的字符串路径/路径对象
              return { path: "/user", query: { id: 200, name: "朱天蓬" } };
          }
      },
      {
          path: "/user",
          name: "User",
          component: () => import("../views/User.vue")
      }
];


# 4、alias 别名，/和/home，都访问首页
# 4.1、访问：localhost:8080/ 和 localhost:8080/home，会跳转到首页
const routes = [
    {
        path: "/",
        alias: "/home",
        name: "Home",
        component: Home,
    }
];


# 5、数组，多个别名
# 5.1、访问：localhost:8080/user/info 和 localhost:8080/i 和 localhost:8080/user/in，都会跳转到用户info页面
# 5.2、传值也可以使用 /user/info:id，/i:id 或 /user/in:id
const routes = [
    {
        path: "/user",
        name: "User",
        component: () => import("../views/User.vue"),
        children: [
            {
                path: "config",
                name: "Userconfig",
                component: () => import("../views/Userconfig.vue"),
            },
            {
                path: "info",
                name: "Userinfo",
                component: () => import("../views/Userinfo.vue"),
                alias: ["/i", "in"]
            }
        ]
    }
];

7、导航守卫

• 主要用来通过跳转或取消的方式守卫导航
• 有 前置守卫 和 后置钩子
• 植入路由导航位置：全局导航、路由独享、组件级守卫

# 1、前置守卫：全局导航（打开 route/index.js 文件）
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes,
});

# 1.2、增加全局导航
router.beforeEach((to, from) => {
    // from 离开路由，to 到达路由，vue路由3.x 有个next参数
    console.log(to);
    console.log(from);

    // 可以把标题赋值给网页顶部，访问meta字段
    document.title = to.meta.title;
});
export default router;


# 2、后置钩子：全局导航（打开 route/index.js 文件）
router.afterEach((to, from) => {
    // from 离开路由，to 到达路由
    console.log(to);
    console.log(from);
});

# 3、路由独享（打开 route/index.js 文件）
# 3.1、beforeEnter 前置守卫
const routes = [
    {
        path: "/user",
        name: "User",
        component: () => import("../views/User.vue"),
        children: [
            {
                path: "config",
                name: "Userconfig",
                component: () => import("../views/Userconfig.vue"),
            },
            {
                path: "info",
                name: "Userinfo",
                component: () => import("../views/Userinfo.vue"),
                alias: ["/i", "in"],
                beforeEnter: (to, from) => {
                    console.log(to);
                    console.log(from);
                }
            }
        ]
    }
];


# 4、组件级守卫
export default {
    beforeRouteEnter(to, from) {
        // 在渲染该组件的对应路由被验证前调用
        // 不能获取组件实例 `this` ！
        // 因为当守卫执行时，组件实例还没被创建！
        console.log(1);
        console.log(to,from);
    },
    beforeRouteUpdate(to, from) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
        // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
        console.log(2);
        console.log(to,from);
    },
    beforeRouteLeave(to, from) {
        // 在导航离开渲染该组件的对应路由时调用
        // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
        console.log(3);
        console.log(to,from);
    }
}

---

四、Vuex 状态管理器

• 官网：https://v3.cn.vuejs.org/guide/migration/introduction.html#vuex
• 官网手册：https://next.vuex.vuejs.org/zh/index.html

1、介绍

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
• 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• 例如：用户信息、登录状态、地理位置，这些就可以使用 Vuex 状态管理器(超全局数组)
• 相当于响应式的超全局变量，在所有的组件中，都能使用

2、单独安装

# npm 命令
npm install vuex@next --save
# yarn命令
yarn add vuex@next --save

3、使用简单的 Vuex

• 状态(State)，驱动应用的数据源
• 视图(View)，以声明方式将状态映射到视图
• 操作(Actions)，响应在视图上的用户输入导致的状态变化
• "单向数据流" 理念的简单示意。

# 1、number只是页面独立数据：Course.vue文件
<template>
    <div>
        <h1>这是课程列表页面</h1>
        <button @click="number--">减-</button>
        {{ number }}
        <button @click="number++">加+</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            number: 0,
        };
    }
};
</script>


# 2、`store/index.js` 文件：vuex状态管理器文件
# 2.1、state 参数，设置num变量
import { createStore } from 'vuex'
export default createStore({
    state: {
        num : 0
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

# 3、Course.vue 文件
<template>
    <div>
        <h1>这是课程列表页面</h1>
        <button @click="number--">减-</button>
        {{ number }}
        <button @click="number++">加+</button>
        

        // 使用$store找到vuex配置，state对应参数
        <button @click="$store.state.num--">减-</button>
        {{ $store.state.num }}
        <button @click="$store.state.num++">加+</button>
    </div>
</template>
// state里的值，也可以是数组和对象
// 上面示例只是简单的处理，如果vuex这么简单就好了。

4、Mutations 多组件处理

• 解决问题一：多个视图依赖于同一状态（传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力）
• 解决问题二：来自不同视图的行为需要变更同一状态（我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝）

• Vue Components：Vue 组件
  • Dispatc：
• Actions：操作
  • Backend API：后台 api 接口
  • Commit：提交
• Mutations：改变
  • Devtools：开发工具
  • Mutate：
• State：状态
  • Render：

# 1、mutations里创建多个方法，方法要修改state的值，可以把state传进来：add(state){}
# 1.1、store/index.js 文件
import { createStore } from "vuex";
export default createStore({
    state: {
        num: 0,
    },
    mutations: {
        add(state){
            # 1.1、方法接收state，可以直接state.找到对应的值
            state.num += 2;
        },
        sub(state){
            state.num -= 2;
        }
    },
    actions: {},
    modules: {},
});


# 2、调用mutations里的方法
# 2.1、Course.vue 文件
<template>
    <div>
        <h1>这是课程列表页面</h1>
        // 使用 mutations里的方法
        <button @click="sub_c()">减-</button>
        {{ $store.state.num }}
		<button @click="add_c()">加+</button>
    </div>
</template>
<script>
export default {
    methods: {
        // 使用this.$store，找到vuex文件里的store配置项，commit调用mutations里的方法
        sub_c() {
          this.$store.commit("sub");
        },
        add_c() {
          this.$store.commit("add");
        }
    }
};
</script>
  

# 3、传值：可以传字符串、数组、对象
<template>
    <div>
        <h1>这是课程列表页面</h1>
        // 使用 mutations里的方法
        <button @click="sub_c(5)">减-</button>
        {{ $store.state.num }}
		<button @click="add_c(5)">加+</button>
    </div>
</template>
<script>
export default {
    methods: {
        // 使用this.$store，找到vuex文件里的store配置项，commit调用mutations里的方法
        sub_c(number) {
          this.$store.commit("sub",number);
        },
        add_c(number) {
          this.$store.commit("add",number);
        }
    }
};
</script>
# 3.1、Course.vue 文件里的mutations方法：接收传值
import { createStore } from "vuex";
export default createStore({
    state: {
        num: 0,
    },
    mutations: {
        add(state,number){
            # 1.1、方法接收state，可以直接state.找到对应的值
            state.num += number;
        },
        sub(state,number){
            state.num -= number;
        }
    },
    actions: {},
    modules: {},
});

5、Getter 计算属性

# 1、单个组件的计算属性：computed
<template>
    <div>
      <h1>这是课程列表页面</h1>
      <button @click="sub_c(2)">减-</button>
      {{ jisuan }}
      <button @click="add_c(2)">加+</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                number: 10
            };
        },
        methods: {
            sub_c(number) {
                this.number = this.number - number;
            },
            add_c(number) {
                this.number = this.number + number;
            }
        },
        computed: {
            jisuan() {
                return this.number * this.number;
            }
        }
    };
</script>
  

# 2、store/index.js 文件
# 2.1、通过getter计算属性
import { createStore } from "vuex";
export default createStore({
    state: {
        num: 10,
    },
    mutations: {},
    getters: {
        jisuan(state) {
            return state.num * state.num * state.num;
        }
    },
    actions: {},
    modules: {},
});
# 2.2、Course.vue 调用getter计算属性
<template>
    <div>
        <h1>这是课程列表页面</h1>
        <button @click="sub_c(2)">减-</button>
        {{ $store.getters.jisuan }}
        <button @click="add_c(2)">加+</button>
    </div>
</template>
<script>
export default {
    methods: {
        sub_c(number) {
            this.$store.commit("sub", number);
        },
        add_c(number) {
            this.$store.commit("add", number);
        }
    },
    computed: {
        jisuan() {
            return this.number * this.number;
        }
    }
};
</script>

6、Actions 异步处理操作

# 1、创建 actions 方法
# 1.1、actions 可以操作mutations，也可以操作state，可以操作getters
import { createStore } from "vuex";

export default createStore({
    state: {
      num: 10,
    },
    mutations: {
        jisuan(state) {
            // return (state.num = state.num + state.num);
            return (state.num = 1234);
        }
    },
    getters: {}, 
    actions: {
        // 方法一：直接调用
        ac_jisuan(all) {
            console.log(all); // 打印查看里面的内容
            // commit ： mutations
            // getters : getters
            // state : state
            all.commit('jisuan');
        }
      
        // 方法二：解构赋值
        ac_jisuan(all) {
            const {commit, getter, state} = all;
            commit('jisuan');
        }
      
        // 方法三：解构赋值，方法接收
        ac_jisuan({commit, getter, state}) {
            setTimeout( ()=>{
                commit('jisuan');
            },3000 );
        }
    },
    modules: {},
});


# 2、调用actions里的方法
<template>
    <div>
        <h1>这是课程列表页面</h1>
        {{ $store.state.num }}
        {{ setnum() }}
    </div>
</template>

<script>
export default {
    methods: {
        setnum() {
            this.$store.dispatch("ac_jisuan");
        }
    }
};
</script>

7、Moduls 模块化

# 1、每个modeules都有另外4个。
# 1.1、一般会用在大型项目，才会分那么细
# 1.2、划分后，调用多了个下标
import { createStore } from "vuex";

export default createStore({
    state: {},
    mutations: {},
    getters: {},
    actions: {},
    modules: {
        user:{
            state: {},
            mutations: {},
            getters: {},
            actions: {},
        },
        course:{
            state: {},
            mutations: {},
            getters: {},
            actions: {},
        }
    }
});

8、文件拆解

# 1、每个属性，都可以在外部使用变量来保存
import { createStore } from "vuex";

const state = {
    num: 10,
};

const mutations = {
    jisuan(state) {
        return (state.num = 123);
    }
};

export default createStore({
    state,
    mutations,
    getters: {},
    actions: {},
    modules: {
        user: {},
        course: {},
    }
});


# 2、拆分多个文件，引入到store/index.js文件中
import { createStore } from "vuex";
import state from './state.js';
import mutations from './mutations.js';

export default createStore({
    state,
    mutations,
    getters: {},
    actions: {},
    modules: {
        user: {},
        course: {},
    }
});
# 2.1、新建state.js文件
const state = {
    num: 10,
};
export default state;
# 2.2、新建mutations.js文件
const mutations = {
    jisuan(state) {
        return (state.num = 123);
    }
};
export default mutations;