前端学习(二):Vuex与ESLint

44 阅读1分钟

前文

哈啰,今天我们来看看ESlint和Vuex的基础使用

一、ESLint

团队的协作开发离不开规范完整的规范可以查看下列网址

standardjs.com/rules-zhcn.…!

ESLint就是一个设定规范的工具

凡是不符合ESLint设置规则的,都会进行报错

安装:

使用vue脚手架安装时选择

image.png

ESlint错误解决:

image.png

二、Vuex

Vuex是一个状态(数据)管理工具,方便各个组件之间进行数据的通信

本质:建立了一个公共数据仓库,供各个组件修改和获取数据

1.创建仓库

image.png

image.png

image.png

2.访问数据

方法一:

image.png

方法二:

image.png

虽然Vuex可以不遵守单向数据流动,直接修改数据,但是我们仍然要遵守规范,使用统一的mutations修改数据,更新状态

3.mutations的使用

image.png

image.png

4.actions的使用

image.png

image.png

actions不是直接修改数据,本质一种经过异步处理后的mutations变种

5.getters的使用

image.png

image.png

getters必须设置return,第一个形参就是state

6.module的使用

image.png

7.访问和修改module的数据

image.png

image.png

image.png

image.png

如果要开启映射指定模块访问数据,

image.png

必须要开启命名空间:

image.png

1.直接访问:

image.png

script中加上this即可,js中去掉$即可

2.映射访问

image.png

image.png

注意开启命名空间

访问mutations方法也是如此:

1.直接访问:

image.png

2.映射访问:

image.png

访问getters方法

1.直接访问

2.映射访问

访问方法:actions方法

1.直接访问:

image.png

2.映射访问:

image.png

image.png