【Vue】自学笔记(四)

上一篇:Vue笔记(三)-CSDN博客


目录

1.VueCli自定义搭建项目

目录

2.Eslint修正代码规范错误

手动解决

自动解决

配置

效果

自动搭配手动解决(建议)

3.Vuex(多组件数据共享)

初识

Vuex的使用

安装Vuex

创建Vuex模块文件与创建空仓库

main.js挂载

验证Vuex是否配置成功

共享仓库Store

如何获取store的数据(两种办法)

[① 通过store直接访问](#① 通过store直接访问)

[② mapState(这个实在是不喜欢用,先留着以后用到了再学)](#② mapState(这个实在是不喜欢用,先留着以后用到了再学))

操作store的数据-mutations

正确操作

mutations-传参(只能传一个)

[案例- 实时输入、实时更新](#案例- 实时输入、实时更新)

mapMutations(配合mapState使用,先不学)

Vuex-actions(异步)

mapActions(配合mapMutations使用,先不学)

Vuex-getters

mapGetters(配合mapState使用,先不学)

Vuex-分模块

模块创建

创建modules目录

编写

导入

检验导入成功

严格模式

访问模块中的state&mutations等

访问state

访问getters

访问mutations

通过mapState访问(先不学)

vue2.x完结



1.VueCli自定义搭建项目

先确保安装了全局工具VueCli

如果没有,则先运行命令 npm i @vue/cli -g

  • 选择最后一个自定义搭建项目
  • 选择需要自动搭建的功能

这里我需要router和css预处理器就空格勾选上,指针滑到最后一行再enter,即可下一步

  • 选择vue版本
  • 路由历史模式

完全不懂什么路由历史模式,老师说,填写Y还需要进行服务器配置,填写N就是哈希模式

这里有一篇博客:vue路由的两种模式 hash与history_vue路由hash和history-CSDN博客

  • 选择css预处理器
  • 选择Eslint规范

无脑入,不让写分号的这个规范,java初学者肯定会难受了

  • 选择配置文件位置
  • 是否保存预设

目录

比默认创建多了几个文件,而且搭建好了路由环境(5步操作)

老师说,这个目录还没有定型,后面还会对其更加科学的改造


2.Eslint修正代码规范错误

最常用的规范标准,也就是自定义项目勾选的那个规范

JavaScript Standard Style (standardjs.com)

报错参考表:规则参考 - ESLint - 插件化的 JavaScript 代码检查工具

手动解决

报错参考表:规则参考 - ESLint - 插件化的 JavaScript 代码检查工具


自动解决

对于刚接触编程的同学来说(刚接触就学vue了?),尤其是没有怎么学过后端语言甚至是js,对于规范几乎是不知道,很容易写一个错一个(这里指的是eslint报错),如果能自动修复就好了(如果想培养自己的规范熟悉度还是不要用这个了)

自动高亮我们不规范的地方(感觉让手动修复也更方便了)

配置
javascript 复制代码
    // 保存时,eslint插件自动修复规范错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 与上面自动修复冲突,关掉这个
    "editor.formatOnSave": false
效果

保存后自动处理

自动搭配手动解决(建议)

这里保存后,自动解决了等号两边要有空格的报错,但是,变量未被使用的错误只能手动解决,所以建议,搭配使用


3.Vuex(多组件数据共享)

初识

Vuex的使用

安装Vuex

这一步可能会出现eslint版本太高的报错

加上 --legacy-peer-deps

博客:【npm】安装报错(大多是版本冲突)-CSDN博客

创建Vuex模块文件与创建空仓库
main.js挂载
验证Vuex是否配置成功

共享仓库Store
如何获取store的数据(两种办法)
① 通过store直接访问

本案例中加法与减法的函数逻辑是错误的,有违规范的,修改store的数据,只能在mutations中,至于Vue为什么不报错,可能是考虑到检测运行成本

一般获取方来自:模版、js模块、组件逻辑

  • 存入数据
  • 子组件
  • 父组件
② mapState(这个实在是不喜欢用,先留着以后用到了再学)

视频出处:094-如何提供&访问vuex的数据_哔哩哔哩_bilibili


操作store的数据-mutations

vuex里的共享数据遵循单向数据流(父->子),所以不能随意操作,更不能使用v-model
上一小节留了一个错误,错误的直接使用this.$store.state.count++操作store的共享数据

而事实上,在企业开发中,约定俗成的,必须使用mutations才可以操作

正确操作

修改上一节的代码

mutations-传参(只能传一个)

可以传参,只能传一个,如果要多传,可以写成一个对象,然后把对象传了

案例- 实时输入、实时更新
html 复制代码
<template>
  <div class="app">
    <son-of-fa-1></son-of-fa-1>
    <son-of-fa-1></son-of-fa-1>
    <p>总数:{{ $store.state.count }}</p>
    <input type="text" :value = "$store.state.count" @input="$store.commit('inputCount', $event.target.value)">
  </div>
</template>

<script>
import SonOfFa1 from './components/SonOfFa1.vue'

export default {
  components: { SonOfFa1 },
  name: 'app'
}
</script>

<style>
.app{
  width: 1400px;
  height: 1000px;
  border: 2px solid #212121;
}
p, input{
  margin-left: 450px;
}
</style>

mapMutations(配合mapState使用,先不学)

Vuex-actions(异步)

actions是异步处理vuex的数据的,watch是处理组件普通的数据的,不要搞混了
context变量作为形参是写死的,必须的,就像mutations 的state一样

mapActions(配合mapMutations使用,先不学)


Vuex-getters

类似于计算属性computed,操作的是属性,结果是一个新属性,而且有缓存,与methods都能实现功能但是用法不太一样


mapGetters(配合mapState使用,先不学)


Vuex-分模块
模块创建
创建modules目录

modules目录下一个js文件处理一个模块的mutations

编写
导入
检验导入成功

严格模式

开发阶段打开严格模式对新手友好,发布阶段关闭


访问模块中的state&mutations等
访问state

访问getters

访问mutations

需要开启命名空间,否则就被挂载到全局,与actions一样


通过mapState访问(先不学)

vue2.x完结

下一篇:

相关推荐
晓数2 小时前
【硬核干货】JetBrains AI Assistant 干货笔记
人工智能·笔记·jetbrains·ai assistant
我的golang之路果然有问题2 小时前
速成GO访问sql,个人笔记
经验分享·笔记·后端·sql·golang·go·database
lwewan2 小时前
26考研——存储系统(3)
c语言·笔记·考研
搞机小能手3 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类
nongcunqq3 小时前
爬虫练习 js 逆向
笔记·爬虫
汐汐咯3 小时前
终端运行java出现???
笔记
无敌小茶5 小时前
Linux学习笔记之环境变量
linux·笔记
帅云毅6 小时前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆6 小时前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
nenchoumi31196 小时前
VLA 论文精读(十六)FP3: A 3D Foundation Policy for Robotic Manipulation
论文阅读·人工智能·笔记·学习·vln