记录使用vscode构建Vue3商店后台管理系统，这是第七篇，主要记录系统登录页面的创建过程，包含完整vue登录页面代码；Vuex的相关知识以及具体的使用，对state中值得获取，修改，异步修改，分模块用法进行详细记录，包含完整代码示例

文章目录

• 一、登录页面的创建
• 二、Vuex 是什么？
• • 查看默认state中定义的count值
  • 修改默认的count值
  • 异步操作修改count值
  • 获取count值
• 三、 store 分模块用法

正文内容：

一、登录页面的创建

1. 创建LoginView.vue文件，在路由列表添加登录页面的相关路由信息，如下所示:

 {path: "/login",name: "loginView",component: () => import("../views/login/LoginView.vue"),}

2. 编辑LoginView.vue文件，具体代码如下所示：

3. 在浏览器输入地址http://localhost:8080/login，查看登录页面效果如下：
   

二、Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

查看默认state中定义的count值

1. 在state里面创建count

import {createStore} from "vuex";export default createStore({// 全局的状态初始值state: {count: 1,},// 计算state，获取对应值getters: {},// 更新状态的方法，更新state的唯一方法，commit mutationsmutations: {},// 可以异步操作，可以返回promise，更改数据还是传递到mutations进行更改actions: {},// 数据比较多的时候，分模块modules: {},
});

2. 引入useStore，获取store对象，在登录按钮下边添加p标签，用于显示默认的count值

import { useStore } from "vuex"export default {name: "login",setup() {const store = useStore()const storeNum = store.state.count;const data = reactive({num: storeNum,})return {...toRefs(data),}}
}

3. 运行效果如下图所示：
   

修改默认的count值

1. 在mutations里面创建修改count值的方法setCount；setCount方法共有两个参数，第一个参数是state，第二个参数是调用这个方法的时候传递的具体数据值

import {createStore} from "vuex";export default createStore({// 全局的状态初始值state: {count: 1,},// 计算state，获取对应值getters: {},// 更新状态的方法，更新state的唯一方法，commit mutationsmutations: {setCount(state, num) {state.count = num;},},// 可以异步操作，可以返回promise，更改数据还是传递到mutations进行更改actions: {},// 数据比较多的时候，分模块modules: {},
});

2. 设置登录按钮的点击事件为更改count数值

import { reactive, toRefs } from "vue"
import { useStore } from "vuex"export default {name: "login",setup() {const store = useStore()const storeNum = store.state.count;const data = reactive({num: storeNum,})const submitForm = function (ruleFormRef) {console.log("login");//通过commit方法更改count值，第一个参数是mutations里面具体的方法名称，第二个参数是count的修改值store.commit("setCount", 100);console.log(store.state.count);}return {...toRefs(data),submitForm}}
}

3. 运行效果如下图所示：
   
   此时count的值并没有双向绑定

异步操作修改count值

1. 在actions 里面定义setCountPromise方法，具体代码，如下所示：

import {createStore} from "vuex";export default createStore({// 全局的状态初始值state: {count: 1,},// 计算state，获取对应值getters: {},// 更新状态的方法，更新state的唯一方法，commit mutationsmutations: {setCount(state, num) {state.count = num;},},// 可以异步操作，可以返回promise，更改数据还是传递到mutations进行更改actions: {setCountPromise(context, num) {return new Promise((resolve, reject) => {if (num > 100) {reject("数值不能大于100");} else {context.commit("setCount", num);resolve();}});},},// 数据比较多的时候，分模块modules: {},
});

2. 修改登录按钮的点击事件，具体代码如下所示

const submitForm = function (ruleFormRef) {//通过dispatch方法更改count值，第一个参数是actions里面具体的方法名称，第二个参数是count的修改值store.dispatch("setCountPromise", 101).then(resp => { console.log(store.state.count); }).catch(err => { console.log(err) });
}

3. 当count的修改值为101时，运行效果如下所示：
   
4. 当count的修改值为100时，运行效果如下所示：
   

获取count值

1. 在getters里面添加getCount方法，具体代码如下所示：

import {createStore} from "vuex";export default createStore({// 全局的状态初始值state: {count: 1,},// 计算state，获取对应值getters: {getCount(state) {return state.count <= 1;},},// 更新状态的方法，更新state的唯一方法，commit mutationsmutations: {setCount(state, num) {state.count = num;},},// 可以异步操作，可以返回promise，更改数据还是传递到mutations进行更改actions: {setCountPromise(context, num) {return new Promise((resolve, reject) => {if (num > 100) {reject("数值不能大于100");} else {context.commit("setCount", num);resolve();}});},},// 数据比较多的时候，分模块modules: {},
});

2. 修改登录按钮的点击事件

 const submitForm = function (ruleFormRef) {store.commit("setCount", 100);console.log(store.getters.getCount);
}

3. 运行效果如下图所示：
   
   在之前我们通过store.state.count也可以获取count值，但是为什么还需要store.getters.getCount这种方式获取count值；首先笔者发现这是一种解耦的操作，通俗的将就是模块之间的耦合度降低，方便代码后期维护管理；通过store.getters.getCount这种方式，对count的操作独立出来，代码后期需要更改时是十分方便的

三、 store 分模块用法

1. 新建文件夹state，用于存储分模块的state数据，新建Number.state.js文件用于存储一个模块的state数据，文件树如下图所示：
   
2. 在Number.state.js写入state数据以及相关操作方法，具体代码如下所示：

export default {//开启namespace:true，该模块就成为命名空间模块namespaced: true,// 全局的状态初始值state: {count: 1,},// 计算state，获取对应值getters: {getCount(state) {return state.count <= 1;},},// 更新状态的方法，更新state的唯一方法，commit mutationsmutations: {setCount(state, num) {state.count = num;},},// 可以异步操作，可以返回promise，更改数据还是传递到mutations进行更改actions: {setCountPromise(context, num) {return new Promise((resolve, reject) => {if (num > 100) {reject("数值不能大于100");} else {context.commit("setCount", num);resolve();}});},},
};

3. 在index.js导入Number.state.js，并在modules添加number，具体代码如下所示：

import {createStore} from "vuex";
import number from "./state/Number.state.js";
export default createStore({// 数据比较多的时候，分模块modules: {number},
});

4. 使用state数据值count，注意用法已经改变，具体代码如下所示：

5. 运行效果如下图所示：