vue核心技术与实战3

自定义创建项目

基于vuecli自定义创建项目架子

ESlint代码规范

代码规范：一套代码的约定规则。例如：=符号的左右是否需要空格等

正规的团队需要统一的编码风格 JavaScript Standard Style 规范说明

解决代码规范的错误

如果代码不符合standard的要求，ESlint就会自己报错

解决：

1. 手动修正：根据错误提示来一项一项修正，如果不认识语法报错是什么意思可以根据ESlint规则表查找具体含义
2. 自动修正：基于vscode插件ESlint高亮错误，并通过配置自动帮我们修复错误

Vuex概述

1. vuex是什么

vuex是一个vue的状态管理工具，状态就是数据，帮我们管理vue通用的数据（多组件共享的数据） 2. 场景

• 某个状态在很多个组件来使用（个人信息）
• 多个组件共同维护一份数据（购物车）

3. 优势

• 共同维护一份数据，数据集中化管理
• 响应式变化
• 操作简捷（vue提供了一些辅助函数）

构建vuex（多组件数据共享）环境

目标：基于脚手架创建项目，构建vuex多组件数据共享环境

效果是三个组件共享一份数据：

• 任意一个组件都可以修改数据
• 三个组件的数据是同步的

创建一个空仓库

目标：安装vuex插件，初始化一个空仓库

1. yarn add vuex@3安装vuex
2. 新建vuex模块文件--store文件夹
3. Vue.use(Vuex)创建仓库new vuex.Store()
4. 在main.js中导入挂到Vue实例上

state

目标：明确如何给仓库提供数据，如何使用仓库的数据

1. 提供数据：

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。在state对象中可以添加我们要共享的数据

2. 使用数据

• 通过store直接访问

• 通过辅助函数 mapState是辅助函数，帮助我们吧store中的数据自动映射到组件的计算属性中

1. 导入import {mapState} from 'vuex'
2. 数组方式引入state
3. 展开运算符映射computed{...mapState(['count']) }

mutations

• 明确vuex同样遵循单向数据流，组件中不能直接修改仓库的数据，

通过 Strict：true可以开启严格模式

const store = new Vuex.Store({
  // 严格模式：（有利于初学者，检测不规范的代码）
  // 任何直接修改组件的数据的行为都会报错,数据只能单向，提供申请然后由仓库统一修改

• 掌握mutations的操作流程，来修改state数据。（state数据的修改只能通过mutations）

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

2. 组件中提交调用mutations

• 掌握mutations传参语法 提交mutation函数是可以传递参数的``

1. 提供mutations函数--在js中（带参数-提交载荷payload）

state必须在第一个，且参数只能有一个，如果有多个参数，包装成一个对象传递 2. 页面中提交调用mutation--在页面中

• 减法功能，巩固mutations传参语法

1. 封装mutation函数
2. 页面中commit申请调用

• 实时输入，实时更新，巩固mutations传参语法

1. 输入框内容渲染 ：value
2. 监听输入获取内容@inputps:不能使用v-model因为组件中不能直接修改state中的值
3. 封装mutation处理函数mutation传参
4. 调用传参commit调用

辅助函数-mapMutations

目标：掌握辅助函数mapmutations，映射方法mapMutations和mapState很像，他是把位于mutations中方法提取了出来，映射到组件methods中

actions

目标：明确actions的基本语法，处理异步操作

需求：一秒钟之后，修改state的count为666

说明：mutations必须是同步的（便于检测数据变化，记录调试），只有actions是异步的

const actions = {
  setuseraction (context, nueuserinfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用Mutations,context上下文，默认提交的就是自己模块的action和mutation

      context.commit('setuser', nueuserinfo)
    }, 1000)
  }
}

辅助函数-mapActions

目标：掌握辅助函数mapActions映射方法 mapActions是把位于actions中的方法提取了出来，映射到组件methods中

getters

目标：掌握核心概念getters的基本语法（类似于计算属性）

说明：除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

例如：state中定义了list，为1-10的数组，组件中，需要显示所有大于五的数据（和数据中的计算属性一样）

1. 定义getters

const getters = {
  upercasename (state) {
    return state.userInfo.name.toUpperCase()
  }
}

2. 访问getters

通过store访问$store.getters.filterList

通过辅助函数mapGetters映射 ...mapGetters(['filterList']),

模块module（进阶语法）

掌握核心概念moduel模块的创建

由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得复杂时，store对象就有可能变得相当臃肿（当项目变得越来越大时，vuex会变得越来越难以维护）

• 模块拆分：

1. 新建user.js文件在store/modules/user.js

// user模块
const state = {
  userInfo: {
    name: 'zs',
    age: 19
  },
  score: 80
}

const mutations = {
  setuser (state, msg) {
    state.userInfo = msg
  }
}
const actions = {
  setuseraction (context, nueuserinfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用Mutations,context上下文，默认提交的就是自己模块的action和mutation

      context.commit('setuser', nueuserinfo)
    }, 1000)
  }
}
const getters = {
  upercasename (state) {
    return state.userInfo.name.toUpperCase()
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

setting模块

// setting模块
const state = {
  theme: 'light', // 主题色
  desc: '测试demo'
}

const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}
const actions = {}
const getters = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

使得项目的用户和设置相关数据模块分开保存，利于维护

2. 在根模块中index.js中引入且添加modules模块注册引入

import user from '@/store/modules/user'
import setting from '@/store/modules/setting'


// 5. modules模块
  modules: {
    user,
    setting
  }

掌握模块中state的访问语法

尽管已经分模块了，但其实子模块的状态，还是会挂载到根级别的state中，属性名就是模块名

使用模块中的数据：

1. 直接通过模块名访问$store.state.模块名.xxx

2. 通过mapState映射 默认根级别的映射mapState('模块名',['XXX'])---需要开启命名空间

掌握模块中getters的访问语法

使用模块中getters中的数据

1. 直接通过模块名访问$store.getters['模块名/xxx']
2. 通过mapGetters映射

根级别的映射 mapGetters(['xxx']) 子模块的映射 mapGetters('模块名',['xxx'])--需要开启命名空间

掌握模块中mutation的调用语法

默认模块中的mutation和actions会被挂载到全局，需要开启命名空间，才会挂载到子模块。

调用子模块中的mutation：

1. 直接通过store调用 $store.commit('模块名/xxx'，额外参数)
2. 通过mapMutations映射

根级别的映射 mapMutations(['xxx']) 子模块的映射 mapMutations('模块名',['xxx'])--需要开启命名空间

掌握模块中actions的调用语法

调用子模块中的actions：

1. 直接通过store调用 $store.dispatch('模块名/xxx'，额外参数)
2. 通过mapActions映射

根级别的映射 mapActions(['xxx']) 子模块的映射 mapActions('模块名',['xxx'])--需要开启命名空间

综合案例-购物车

功能分析，创建项目，构建分析基本结构

1. 功能模块分析

• 请求动态渲染购物车，数据存在vuex中
• 数字框控件 修改数据
• 动态计算 总价和总数量

2. 脚手架新建项目（注意勾选vuex）

vue create cart-demo

3. 将原本src内容清空，替换成素材《vuex-cart-准备代码》并分析

构建cart购物车模块

既然明确数据要存vuex，建议分模块存，购物车数据存在cart模块，将来还会有user模块，article模块...

1. 新建store/modules/cart.js 模块

2. 挂载到vuex仓库上 store/index.js

基于json-server工具，准备后端接口服务环境

1. 安装全局工具 json-server（全局工具仅需安装一次）官网 yarn global add json-server 或 npm i json-server -g

2. 代码根目录新建一个db目录

3. 将资料index.json移入db目录

4. 进入db目录，执行命令，启动后端接口服务json-server index.json

5. 访问接口测试http://localhost:3000/cart

推荐：json-server --watch index.json(可以实时监听json文件的修改)

请求获取数据存入vuex，映射渲染

1. 安装axios
2. 准备actions和mutataions

在cart.js中：在mutations中可以直接修改state的数据，在actions中可以获取后台数据，然后调用mutations方法，并且把获取到的数据传给mutations，mutations被调用后会根据传过来的新数据直接修改vuex中的数据

3. 调用action获取数据

在vue.app（根页面）中，使用vuex，调用action（获取数据），并且使用map映射调用方法，根据父传子传值，再将数据遍历且传入子组件中

4. 动态渲染在子组件中

完成修改数量功能

注意：前端vuex数据，后端数据库数据都需要更新

1. 给数据列表这个组件中的数量加减按钮元素绑定点击事件
2. 在方法中，经过必要条件判断筛选之后，使用actions：this.$store.dispatch('仓库组件名/方法名'，{传递的数据，以对象方式传递多条数据})
3. 提供action函数，在刚刚使用的组件中的actions中创建对应的函数
4. actions函数中需要调用mutations中的函数来使state中的数据发生改变context.commit('updateList', res.data)（context是传入的参数，代表的意思是上下文，一般在参数的第一个位置）

底部getters统计

1. 提供getters

2. 使用getters