vuex导入注册及核心概念

状态管理工具? ? 状态就是数据，管理vue的通用数据（多组件共享的数据）

场景：

1.某个状态在很多个组件中使用（个人信息）

2.多个组件共同维护一份数据（购物车）

导入注册流程

1.安装vuex? 3.0版本

npm i vuex@3

2.新建vuex模块文件夹? store文件夹

3.创建仓库 （store文件夹下的index.js文件）

import Vue from ‘vue’

import Vuex from 'vuex'

Vue.use(Vuex)? //插件注册安装

const store=new Vuex.Store()? //新建空仓库

export default store? ?//导出给main.js使用

4.main.js导入挂载

import store from '@/store/index'

main.js

组件访问仓库：this.$store

注：mapState mapGetters均映射到计算属性； mapActions和mapMutations映射到methods

一.state状态（类似于data数据）

提供唯一的公共数据源，所有共享数据都统一放到Store中的state中存储

data是组件自己的数据，state是共享数据

1.提供数据

store/index.js

2.使用数据

2.1mapState 辅助函数，把store中的数据自动映射到组件的计算属性中

等价

二. mutations 修改state数据?(同步)

组件中不能直接修改仓库的数据?this.$store.state.count++(错的)? 类似于methods

流程：

1. 定义mutations对象，对象中存放修改state的方法

store/index.js

2. 组件提交调用mutations

组件中使用

3. mutations传参（只能传一个参数，需要传多个，可改为对象{}形式）

this.$store.commit('方法名',参数)

4. mapMutations辅助函数? ?

把位于mutations中的方法取出来，映射到methods中

等价于执行右边

this.subCount(n)? ?调用

三. actions

处理异步操作（发请求）

1.context上下文，此处未分模块，相当于store? ??分块模块后，context为当前模块环境

2.调用actions里的方法（actions名字，参数）：

3.mapActions辅助函数

将actions里面的方法提取出来，映射到methods中

组件vue文件

四. getters

类似于计算属性? 第一参数为state，必须要有返回值

除state外，有时需要从state中派生出一些状态，这些状态依赖state，此时会用到getters

1.定义getters

2.访问getters

2.1 通过store访问

{{$store.getters.filterList}}

2.2辅助函数mapGetters

五. 模块 module

当项目越来越大时，store会变得臃肿，vuex会难以维护

1. 模块拆分：

在store文件夹下新建modules文件夹，存储各个模块的state? mutations actions getters，并进行导出；在store/index.js中导入并挂载。

2.使用模块中的数据? state

2.1 直接访问模块名获取

$store.state.模块名.xx

2.2 使用mapState映射

默认根级别的映射? mapState(['xx'])

子模块的映射 mapState('模块名',[''xx])

需开启命名空间

命名空间

数据映射

组件vue文件

3. 使用模块中的getters

为属性名 xxx

1.先获取仓库store，然后通过'模块名/xxx'获取数据

2.通过映射的方式，辅助函数

子模块

子模块

4.模块中使用mutations

xxx为方法名

1.通过store调用

? ? ? ? $store.commit('模块名/xxx'，参数)

2.通过辅助函数mapMutations映射

? ? ? ?默认是根级别的映射:? mapMutations(['xxx'])

? ? ? 子模块的映射:? ...mapMutations('模块名'，['xxx'])? ?要开命名空间

5.模块中使用actions

小工具

json-server,准备后端接口服务环境

安装：npm i json-server -g? 或

yarn global add json-server

操作步骤：?『前端必备』本地数据接口 —— json-server 从入门到膨胀-腾讯云开发者社区-腾讯云

1.在根文件夹下创建db文件夹和index.json文件

2.准备json数据

3.执行 json-server --watch index.json

启动接口服务

4.查http://localhost:3000/cart

npm修改源——多个方面详细阐述_笔记大全_设计学院

购物车案例

修改购物数量

修改流程

代码流程

购物车计算商品数量和总价

流程