vuex模块化（为用户配置后台时）

本文目录

• 为用户配置后台时
• Vue使用vuex进行项目模块化，两种调用方式
• vuex的五个属性是什么
• vuex配置对象参数的是
• vuex基础总结
• 模块化vuex，获取、设置数据，及刷新保留数据方法
• vuex的五个属性及使用方法
• VueX（Vue状态管理模式)

为用户配置后台时

后台管理系统基础配置 原创
2022-10-24 18:58:57
2点赞
式微式微 胡不归
码龄3年
关注
目录
一、文件配置
1.文件协议配置
2. env文件配置
 3.生产和开发环境基地址配置
 二、elementUI使用
 三、核心路由配置
四、Layout 布局
五、登录表单
1.定义表单变量
 2.表单校验三要素
 3.表单校验
 4.登录请求
 5.使用js-cookies存储token
6. 将登录请求放入vuex中
 7.退出登录
①设置退出方法
 ②退出点击事件
 ③退出
 六、主页页面-【侧边栏、头部、主体】
 1.模块化
 2.侧边导航
七、表格
1.表格中使用插槽 
 八、导航守卫
 九、获取用户资料 
1.注册请求方法
2.获取
 十、简化vuex-模块抽离
 十一、侧边栏折叠
 十二、导航守卫拆分
十三、侧边导航设置路由
1.思路图
 2.静态和动态路由
 3.路由设置
 ①会员设置
 ②系统设置​
 ③内容设置​
 ④广告设置
 ⑤导入​
 ⑥设置路由
 十四、活动导航
$route.meta.matched内容
十五、vuex模块化
一、文件配置
1.文件协议配置
2. env文件配置
 3.生产和开发环境基地址配置
 二、elementUI使用
 
  
 三、核心路由配置
四、Layout 布局
五、登录表单
1.定义表单变量
 2.表单校验三要素
 3.表单校验
 4.登录请求
 5.使用js-cookies存储token
 
6. 将登录请求放入vuex中
 7.退出登录
①设置退出方法
 ②退出点击事件
 
 ③退出
 六、主页页面-【侧边栏、头部、主体】
1.模块化
 2.侧边导航

Vue使用vuex进行项目模块化，两种调用方式

刚开始接触uniApp看了一下vuex的使用方法，总结一下在项目中个人认为常用的架构，很实用，做一个新手学习笔记!!!

使用Vue创建项目,在项目内创建store目录，在目录内创建 index.js 文件，如下

vuex的五个属性是什么

promise的使用场景 、axios使用教程、 vuex刷新页面数据丢失 、vuex页面刷新数据、vuex存储信息。

属性是一个汉语词汇，拼音是shǔ xìng。意思是人类对于一个对象的抽象方面的刻画。

一个具体事物，总是有许许多多的性质与关系，我们把一个事物的性质与关系，都叫作事物的属性。

事物与属性是不可分的，事物都是有属性的事物，属性也都是事物的属性。

一个事物与另一个事物的相同或相异，也就是一个事物的属性与另一事物的属性的相同或相异。

由于事物属性的相同或相异，客观世界中就形成了许多不同的事物类。具有相同属性的事物就形成一类，具有不同属性的事物就分别地形成不同的类。

苹果是一类事物，它是由许多具有相同属性的个别事物组成的。梨也是一类事物，它也是由许多具有相同属性的个别事物组成的。苹果和梨是两个不同的类。苹果这个类的共同属性是不同于梨这个类的共同属性的。

vuex配置对象参数的是

1、安装和配置Vuex
1) vuex是一个插件，所以我们需要通过npm指令安装。
npm i vuex
2) 在main.js人口文件引入Vuex，插件需要应用就需要将插件应用Vue.use(Vuex)，这个是直接在main.js直接写Vuex的部分代码，不符合模块化这个思路，所以不建议这样去写。在开发中如果使用到vuex，一般是创建一个名为store的文件夹，在此文件夹下有一个index.js文件，在这写对应的vuex代码。
import Vue from ’vue’
import App from ’./App.vue’
// 引入Vuex
import Vuex from ’vuex’
Vue.use(Vuex)

c***t acti*** = {

}
c***t mutati*** = {

}
c***t state = {
perosn: {
name: ’张三’,
age: 18,
***: ’男’
}
}

c***t store = new Vuex.Store({
acti***, mutati***, state
})
c***t vc = new Vue({
render: h =》 h(App),
store,
}).$mount(’#app’)

c***ole.log(vc);
3) 这里是使用模块化写vuex代码，使用的是默认暴露，有一个要点要说一下，Vue.use必须写在这个文件里面，如果在main.js写Vue.use(Vuex)，由于框架先解析import里面文件，在外面写的Vue.use(Vuex)不能被里面的识别到，所有会报错。到这里Vuex的配置就好了，下面我们写组件来观察这个Vuex中的数据如何获取和修改。
// 这里写关于store的代码

// 引入vue
import Vue from ’vue’
// 引入Vuex
import Vuex from ’vuex’
Vue.use(Vuex)

c***t acti*** = {

}
c***t mutati*** = {

}
c***t state = {
person: {
name: ’张三’,
age: 18,
***: ’男’
}
}
export default new Vuex.Store({
acti***, mutati***, state
})

配置完成后在控制台输出Vue对象可以看见

vuex基础总结

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

上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据

多个组件共享数据或者是跨组件传递数据时

然后在组件中就可以通过this.$store访问到vuex了

state作为唯一的数据源，所有的共享数据都存放在state中，如：

vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutati***修改，其实在组件中是可以直接修改的，但是这样通过mutati***修改的方式，可以更加集中的监控所有数据的变化。
在mutati***中定义一些修改state数据的方法，方法第一个参数就是state对象

（1）触发mutation的方法

这次是在组件的methods中，将mutation映射成methods的方法

（2）mutation传值（官网将传递的值称为载荷）
对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据

还可以写成一种对象的方式

mapMutati***传值

（3）注意

acti***和mutati***类似，不同的是，acti***是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；acti***中可以执行异步操作。acti***中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行acti***方法的方式就是：this.$store.dispatch(’方法名’)
比如定义一个定时器异步的使count自增

而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了

组件中访问getters中的属性
其实和state差不多，就不多说了

下一节：vuex模块化

模块化vuex，获取、设置数据，及刷新保留数据方法

1.模块化vuex
2.获取vuex中的数据
3.设置vuex中的数据
4.刷新之后，保留数据

数据结构

index.js

transaction.js模块

注意：namespaced是为了解决不同模块命名冲突的问题,分两种情况来写

获取vuex中的数据

设置vuex中的数据

如果将namespaced设置为false，则需要注意命名不能重复

也可以使用mapState,mapGetters,mapActi***
安装

修改index.js配置，将数据保存到sessionStorage

vuex的五个属性及使用方法

vuex的五个属性及使用方法如下：

基本属性：

1、state：vuex的基本数据，用来存储变量。

2、geeter：从基本数据(state)派生的数据，相当于state的计算属性。

3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4、action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vuex的用法：

新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js。

在项目的main.js中引入  import store from ’./store’。

在store文件下的index.js中引入。

VueX（Vue状态管理模式)

VueX 是适用于在 Vue 项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步 data 中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此， Vue 为这些被多个组件频繁使用的值提供了一个统一管理的工具—— VueX 。在具有 VueX 的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

由于 VueX 是在学习 VueCli 后进行的，所以在下文出现的项目的目录请参照 VueCli 2.x 构建的目录。

以下步骤的前提是你已经完成了Vue项目构建，并且已转至该项目的文件目录下。

打开main.js

例如在App.vue中，我们要将state中定义的name拿来在h1标签中显示

或者要在组件方法中使用

注意，请不要在此处更改 state 中的状态的值，后文中将会说明

在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。

在学习VueX时，更为需要使用该插件。关于该插件的使用可以移步官网，在此不再赘叙。

在VueX对象中，其实不止有 state ,还有用来操作 state 中数据的方法集，以及当我们需要对 state 中的数据需要加工的方法集等等成员。

成员列表：

首先， Vue 组件如果调用某个 VueX 的方法过程中需要向后端请求时或者说出现异步操作时，需要 dispatch VueX中 acti*** 的方法，以保证数据的同步。可以说， action 的存在就是为了让 mutati*** 中的方法能在异步操作中起作用。

如果没有异步操作，那么我们就可以直接在组件内提交状态中的 Mutati*** 中自己编写的方法来达成对 state 成员的操作。注意， 1.3.3节 中有提到，不建议在组件中直接对 state 中的成员进行操作，这是因为直接修改(例如： this.$store.state.name = ’hello’ )的话不能被 VueDevtools 所监控到。

最后被修改后的state成员会被渲染到组件的原位置当中去。

mutati*** 是操作 state 数据的方法的集合，比如对该数据的修改、增加、删除等等。

mutati*** 方法都有默认的形参：

( )

例如，我们编写一个方法，当被执行时，能把下例中的name值修改为 "jack" ,我们只需要这样做

index.js

而在组件中，我们需要这样去调用这个 mutation ——例如在App.vue的某个 method 中:

在实际生产过程中，会遇到需要在提交某个 mutation 时需要携带一些参数给方法使用。

单个值提交时:

当需要多参提交时，推荐把他们放在一个对象中来提交:

接收挂载的参数：

另一种提交方式

为了配合Vue的响应式数据，我们在Mutati***的方法中，应当使用Vue提供的方法来进行操作。如果使用 delete 或者 xx.xx = xx 的形式去删或增，则Vue不能对数据进行实时响应。

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

例如

组件中调用

由于直接在 mutation 方法中进行异步操作，将会引起数据失效。所以提供了Acti***来专门进行异步操作，最终提交 mutation 方法。

Acti*** 中的方法有两个默认参数

例如，我们在两秒中后执行 2.2.2 节中的 edit 方法

由于 setTimeout 是异步操作，所以需要使用 acti***

在组件中调用:

改进:

由于是异步操作，所以我们可以为我们的异步操作封装为一个 Promise 对象

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成 模块（module） 。每个模块拥有自己的 state、mutation、action、getter 、甚至是嵌套子模块——从上至下进行同样方式的分割。

组件内调用模块a的状态：

而提交或者 dispatch 某个方法和以前一样,会自动执行所有模块内的对应 type 的方法：

如果把整个 store 都放在 index.js 中是不合理的，所以需要拆分。比较合适的目录格式如下：

对应的内容存放在对应的文件中，和以前一样，在 index.js 中存放并导出 store 。 state 中的数据尽量放在 index.js 中。而 modules 中的 Astore 局部模块状态如果多的话也可以进行细分。