1.什么是vue
Vue 是一套用于构建用户界面的渐进式框架。
2.{{}}--模板语法--双大括号赋值法
在vue中{{}}被称之为模板语法 双花括号赋值法 vue数据插值。
作用：就是可以在双大括号中写入表达式 并且展示在页面中
语法:在你想展示数据的任何位置 {{表达式}} （表达式 通过计算可以返回结果的公式）
3.指令
通过写在html开标签中，v-开头的特殊属性， 可以扩展标签的功能
- v-model ：双向绑定
- v-text：向dom中插入文本内容，和{{}}作用一样
- v-html：就是把字符串标签插入到页面中，可以解析标签
- v-show：控制dom元素的显示隐藏（通过控制css样式控制）
- v-if：控制dom元素的移除与添加，效果与v-show类似，但是原理不同，v-if控制的是dom元素的移除与添加。
- v-on：给dom元素绑定事件，v-on:click="函数名”可以简写为@click="函数名"
- v-for：遍历数据 v-for="(遍历的值,遍历的下标) in 你要遍历的数据"，一般要与key搭配使用，key表示遍历出来的元素的唯一标识，可以增加遍历生成都没元素的效率，不建议使用下标。
- v-bind：给html标签的属性插入变量，可以简写为“：”
- v-once：一次性插值，数据插入到页面中后就不会被改变了
- v-clock：等待vue实例渲染完成之后在进行
注意:
- v-if与v-for可以同时使用，但是不推荐同时使用，
v-for具有比v-if更高的优先级，如果同时使用，会将分别重复运行于每个v-for循环中,影响速度，如果必须使用，建议v-if嵌套v-show - 屏幕闪烁问题， 当用户的设备和网络比较慢的时候可能就会在页面中吧{{}}全部展现出来 当网络恢复正常之后 有突然间显示ok,解决办法：可以使用v-text，或者使用v-clock指令
4.事件对象--$event
谁触发这个事件事件对象就指向谁 （事件对象中包含触发这个事件的元素所有信息）类似于拖拽
<input type="text" @keydown="fun($event)">
fun(e) {
console.log(e)
if (e.keyCode == 90) {
console.log("z被按下了")
}
}
5.修饰符
通过vue提供的修饰符可以来处理dom事件的一些细节性的内容
v-on:事件.修饰符="函数()"
按键修饰符
.up .down .left .right .ctrl .space .enter .tab .delete .shift .esc
<div id="demoDiv">
<input type="text" @keydown.space="fun()">
</div>
<script>
let vm = new Vue({
data: {
},
methods: {
fun() {
console.log("空格被按下了")
}
}
})
vm.$mount("#demoDiv")
</script>
事件修饰符
- stop修饰符 阻止事件传播
- prevent修饰符 阻止事件默认行为
- captrue修饰符 设置捕获
- self 修饰符 只会触发自己范围内的事件 不包含子元素
- once修饰符 只触发当前事件一次
v-model修饰符
- lazy修饰符：只有当用户的input中失去焦点或者用户点击回车按钮时，才会将的数据进行修改。
- number修饰符：当用户在input中输入数字时，浏览器会默认将输入的数字转化为string类型，使用number修饰符来将输入的数字转为number类型
- trim修饰符：使用trim修饰符来去掉字符串首部或者尾部的所有空格
6.计算属性（computed）
当一条数据，在不同位置展示出不同形态的时候 ，可以使用计算属性。计算属性就是通过加工计算返回一个新的结果，就是计算属性,使用的时候不加()
传统写法
get方法:必须要写，该函数不接受参数,当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
computed:{
计算出存储结果的名字:{
//必须要写，该函数不接受参数
//什么时候被调用?：当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
get(){
return 你的计算逻辑
},
//set方法： 可选项 接受一个可选参数（计算属性被修改之后的值）当计算属性的值被修改时被调用
set(value){
}
}
}
// 案例
<body>
<div id="demodiv">
<h1>读取data中的数据--{{text}}</h1>
<input type="text" v-model="newtext">
<h1>读取计算属性的数据--{{newtext}}</h1>
</div>
<script>
let vm=new Vue({
el:"#demodiv",
data:{
text:"abcdefghijk"
},
// 计算属性
computed:{
newtext:{
get(){
console.log("我是计算属性的get方法")
return this.text.toUpperCase()
},
set(value){//当newtext被修改的时候set就会触发 value就是修改之后的数据
console.log("我是计算属性的set方法",value)
}
}
},
})
</script>
</body>
简写写法（推荐）
computed:{
你处理好的变量(){
return 你的处理逻辑
}
}
注意
- 计算属性是依赖data里面的数据的，当依赖的data数据反生改变时，计算属性触发，返回新的结果
- 计算属性多次调用，但是只触发一次，因为计算属性是依赖缓存的。
7.watch监听/侦听
watch是vue实例的一个属性 他的作用就是用来监听data中的数据 当数据变了watch就会触发 从而调用函数处理一些逻辑
简写方法
watch:{
你要监听的data数据(newval,oldval){
}
}
传统写法
watch：{
text:{
// data监听的数据改变触发的回调函数
handler(newVal,oldVal){
console.log('aaa')
},
// deep，代表是否开区深度监听
deep:true,
// 初始化是否执行
immediate:true
}
}
注意
- 受现代 JavaScript 的限制. Vue 不能检测到对象属性的添加或删除。需要深度监听则需要设置deep属性来完成深度监听
- deep会把对象中的所有属性都监听到，不管是否需要监听， 这样性能开销就会非常大，解决方法：可以使用字符串形式进行监听，如 "obj.name"
- watch默认初始化是不会触发的，初始化需要触发需要通过设置immediate属性完成
8.计算属性与watch的区别
计算属性 ： 计算属性是依赖data的数据 当data的数据改变之后 计算属性会重新计算返回一个新的结果
watch： watch是监听data的数据 当data的数据改变之后 watch会调用一个回调函数完成一些特定的逻辑
计算属性是同步的 watch是异步的
| 计算属性（computed） | 属性检测（watch） |
|---|---|
| 首次运行 | 首次不运行 |
| 默认深度依赖 | 默认浅度观测 |
| 适合做筛选，不可异步 | 适合做执行异步或开销较大的操作 |
9.钩子函数
在vue中可以自动执行的函数叫做钩子函数
8大生命周期钩子函数
| 时期 | 函数 | 功能 |
|---|---|---|
| 实例创建之前 | beforeCreate | 数据的观测与事件的初始化 |
| 实例创建之后 | created | vue实例已经创建完毕 |
| 模板渲染之前 | beforeMount | 页面还没有进行渲染与模板的编译 程序在此时会把数据绑定到页面上 但是页面并没有显示 |
| 模板渲染之后 | mounted | dom元素渲染完成 |
| 数据更新之前 | beforeUpdate | 数据会不停的在dom中进行修改 |
| 数据更新之后 | updated | 修改之后的dom内容已经在页面成功的展示了 |
| 实例销毁之前 | beforeDestory | 此时vue实例还能用 |
| 实例销毁之后 | destoryed | 什么都没有了 vue实例等内容都没了 |
10.自定义指令
在现有内置指令不够用的时候 我们可以自己定义指令来进行使用
自定义指令生命周期钩子函数
bind 指令绑定到元素之上的时候执行 但是只执行一次
unbind 指令被移除的时候执行 只执行一次
update 所有组件节点更新的时候执行调用
componentUpdate 指令所在节点以及所有的子节点都更新完成的时候调用
inserted 绑定指令的元素在页面展示的时候调用
全局自定义指令--directive（定义在main.js文件中）
Vue.directive("自定义指令名字",{
// el表示dom元素
// binding表示接受的参数
自定义指令钩子函数(el，binding){
你的逻辑
}
})
局部自定义指令--directives
directives:{
自定义指令的名字:{
// el表示dom元素
// binding表示接受的参数
自定义指令的钩子函数（el,binding）{
你的逻辑
}
},
自定义指令的名字2:{
},
}
11.组件
组件的本质就是自定义标签，增加了开发效率，降低了维护难度，复用性更高
全局组件--component
只需要在main.js中配置一次，就可以在所有项目中任意位置直接使用了（全局组件应该慎用，全局组件可能会造成组件命名混乱）
import Vue from 'vue'
import App from './App.vue'
// 1.引用
import AllCom from "./components/AllCom.vue"
// 2.配置全局组件
// Vue.component(“给你这个全局组件起个名字”,你所要对应使用的组件)
Vue.component("AllCom",AllCom)
局部组件--components
局部组件，谁使用就谁引用（使用顺序，先引用，再调用，最后再使用）
<template>
<div>
<!-- 3.使用 -->
<Bottombar></Bottombar>
<List></List>
<Slider></Slider>
</div>
</template>
<script>
// 1.引用 组件的名字要大写
import Bottombar from "./components/BottomBar/BottomBar.vue"
import List from "./components/ListCom/ListCom.vue"
import Slider from "./components/SliderCom/SliderCom.vue"
export default {
name: 'App',//命名空间 给这个组件起个名字
// 2。调用
components:{
// 名字:你引用的组件
Bottombar,
List,
Slider
}
}
</script>
组件样式隔离--scoped
使用scoped属性可以让 当前样式仅对当前组件生效
<style scoped>
div{
color:green;
}
</style>
vue组件的data为什么是个函数
数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
组件传值（组件通信）
父组件的数据子组件不能直接使用，同样的，子组件的数据父组件也不能直接使用，组建于组件之间是一个完整的个体，他们之间的数据默认是不能直接进行交互的。
正向传值 --父向子（自定义属性传值）
props是vue实例的一个属性 他的作用是用来让组件接受外部传递进来的数据
基本props使用
- 在子组件中使用props定义接收参数
- 父组件在组件内定义需要传递的参数
- 注意 ： 父组件在给子组件添加自定义属性时，自定义的属性名要与子组件内props内定义的接收参数名称一致
<!-- 子组件 -->
<template>
<div>
<!-- 2.使用 -->
zizizizizizizzi--{{xiaoming}}---{{xiaohong}}
</div>
</template>
<script>
export default {
// 1.定义接收参数
props:["xiaoming","xiaohong"]
}
</script>
<!-- 父组件 -->
<template>
<div>
fuffufufufufufufuf
<!-- 在子组件被调用的地方 把props的参数当成属性进行传值 -->
<Zicom :xiaoming="text" :xiaohong="num"/>
</div>
</template>
<script>
import Zicom from "./ZiCom.vue"
export default {
components:{
Zicom
},
data(){
return {
text:"我是字符串",
num:18
}
}
}
props验证语法
如果想限制父组件给子组件传递的数据类型时候 那么就可使用props验证，props验证可以对传递给子组件的数据 进行约束（数据类型 默认值 等）
<template>
<div>
<!-- 2.使用 -->
zizizizizizizzi--{{xiaoming}}---{{xiaohong}}
</div>
</template>
<script>
export default {
// 1.定义接收参数
// props:["xiaoming","xiaohong"]
// props验证
props:{
xiaoming:{
type:String,
default:'默认值'
},
xiaohong:{
type:Boolean
}
}
}
</script>
<style>
</style>
逆向传值 --子向父
使用自定义事件完成逆向传值
- 子组件：通过emit("自定义事件的名字",你要传递的数据)`
- 父组件：触发自定义事件接收值 语法：
<Zicom @zipao="fun"/>父组件触发的函数的形参就是接受的参数
<!-- 子组件 -->
<template>
<div>
zzizizizizizizizi
<!-- 1.通过事件调用一个自定义事件的创建 -->
<button @click="fun()">点我逆向传值</button>
</div>
</template>
<script>
export default {
data(){
return {
zitext:"我是子组件的数据么么哒！！！！！"
}
},
methods:{
fun(){
// 2.在函数中使用$emit来创建一个自定义事件
// this.$emit("自定义事件的名字",你要传递的数据)
this.$emit("zipao",this.zitext)
}
}
}
</script>
<!-- 父组件 -->
<template>
<div>
fufufufufufufuf
<Zicom @zipao="fun"/>
</div>
</template>
<script>
import Zicom from "./ZiCom.vue"
export default {
components:{
Zicom
},
methods:{
// 有个形参 这个形参接收的就是刚才自定义事件的第二个参数
fun(val){
console.log(val)
}
}
}
</script>
通过ref完成传参
把ref绑定到子组件身上 那么就可以得到当前这个子组件的所有信息 包含他的data数据以及methods方法从而完成了逆向传值
<template>
<div>
fufufufufufufuf
<Zicom ref='ziMsg' />
</div>
</template>
<script>
import Zicom from "./ZiCom.vue"
export default {
components:{
Zicom
},
mounted(){
// 接收参数
console.log（this.$refs.ziMsg.zitext)
}
}
</script>
中央事件总线 --eventbus
中央事件总线：就是凌驾在两个兄弟组件之上的一个空vue实例 这个实例建立起了一个数据流动的桥梁
- 创建一个index.js。在js中创建一个新的vue实例
import Vue from 'vue'
export default new Vue()
- 将要传的数据的组件，先把数据通过$emit自定义事件把数据挂载到这个空的vue实例上
<template>
<div>
兄弟b
</div>
</template>
<script>
import eventBus from 'index.s'
export default {
daat(){
return{
text:"a组件内容"
}
}
mounted(){
// eventBus.$emit('事件名'，传递的参数)
eventBus.$emit('evb',this.text)
}
</script>
- 接收参数的组件，通过$on监听实例上的自定义事件，从而完成同胞传值
<template>
<div>
兄弟b
</div>
</template>
<script>
import eventBus from 'index.s'
export default {
mounted(){
// eventBus.$on("你要监听的自定义事件名",(val这个形参就是你监听自定义事件上面的数据)=>{})
eventBus.$on('evb',(val)=>{
console.log(val)
})
}
}
</script>
状态提升
把原有放在组件身上的数据 全部统一放到他们共同的父组件身上 旧免去了复杂的数据传递
12.前后端交互
fetch VS axios VS ajax区别
- 传统的ajax就是指使用XMLHttpRequest方法实现的数据请求， 他隶属于原生的js 核心就是XMLHttpRequest对象 ，如果多个请求有先后顺序的话 那么容易造成回调地狱问题
- .axios 是基于promise封装的 本质上还是XMLHttpRequest的封装 只不过他是基于最新的语法进行封装的
- .fetch 就是原生js最新标准 和XMLHttpRequest没有半点关系
axios的使用
- 下载axios ：npm install --save axios
- 引用：import axios from 'axios'
- 使用：axios({url:,method:'请求方式'}).then((res)=>{}).catch((err)=>{})
序列化参数
axios发送post请求时，请求头Content-type（表示请求和响应中的媒体类型信息）常见有三种形式：
- Content-Type: application/json 就是给后台的数据是一个json对象
- Content-Type: 最主流的是application/json形式表单数据编码为键值对，&分隔 如：name=java&age = 23
- Content-Type: multipart/form-data 通常文件上传
最主流的是application/json形式，axios默认也是这种形式，但是如果后端要求必须以最主流的是application/json形式,那么通过json的新式传递参数，后端是无法接受的，后端接收不到必须使用参数数据进行序列化处理才行
使用qs模块来序列化参数
- 下载 npm install --save qs
- 引用 import qs from “qs”
- 在传递数据的时候使用qs序列化
let key=qs.stringify({
key:val
})
// 引用qs
import qs from 'qs';
// 序列化数据
let key=qs.stringify({
name:"xixi"
})
// 传递
axios.post("/api/userlist/post",key).then((ok)=>{
console.log(ok)
}).catch((err)=>{
console.log(err)
})
}
跨域
因为浏览器的安全机制 同源策略 不同端口不同域名不同协议 就会造成跨域
解决跨域的方法:
- nginx反向代理
- jsonp
- cors:后端解决跨域
- devServer代理跨域：
devServer他就是一个vue脚手架中那个内置的微型开发小服务器 可以让他代理去发送请求 这样一来就不经过浏览器了 没有经过浏览器 那么就没有同源策略 没有同源策略就没有跨域 从而就解决了跨域
devServer就是vue脚手架中那个内置的微型开发小服务器--注意 上线之后 该种方式就会失效
步骤：
- 在项目的根路径下 创建一个vue.config.js
module.exports={
devServer: {
proxy: { //配置跨域
'/api': {
target: 'http://www.weather.com.cn/', //需要解决跨域的地址
pathRewrite: {
'^/api': ''
}
},
}
},
}
- 修改请求路径
<template>
<div>
<h1>大纲要修写法</h1>
<button @click="fun()">点我请求数据</button>
</div>
</template>
<script>
import $http from "axios"
export default {
methods:{
fun(){
$http({
// 修改名字
url:"/api/data/cityinfo/101320101.html",
method:"get",//没有s
}).then((ok)=>{
console.log(ok)
}).catch((err)=>{
console.log(err)
})
}
}
}
</script>
axios封装
在大型项目中，http请求会特别的多，而不同模块的请求接口都需要区分，所以可以把数据请求拆分出来单独管理，增加项目的可维护性和扩展性。
封装步骤：
- api 请求集中式管理
- 实现请求拦截
- 实现响应拦截
- 常见错误信息处理
- 请求头设置
api请求集中管理
- 初始化axios实例，在util文件夹中添加request.js文件。通过create()方法创建axios实例，该实例上可配置拦截器
import axios from "axios"
// 创建 axios 请求实例
const instance = axios.create({
baseURL: "", // 基础请求地址
timeout: 10000, // 请求超时设置
});
export default serviceAxios
- 创建api文件夹，编写不同的js接口文件，完成api请求的集中管理
import request from "../util/index.js"
export let funget=()=>{
return request({
url:"/api/userlist/get",
method:"GET",
params:{
name:"xixi"
}
})
}
- 在组件中使用
// 引用
import {funget} from "../api/index.js"
// 使用
funget().then((ok)=>{
console.log(ok)
})
}
axios拦截器
拦截器： 每次发送请求或者请求相应的时候 都会经过拦截器 才会进入到我们的程序（就是对我们的请求和响应进行发送前或者获取前的一个拦截 ）
请求拦截： 在请求发送前进行拦截，或者对请求错误进行拦截
响应拦截：在请求结果返回后，先不直接显示错误，而是先对响应码等等进行处理，处理好后再导出给页面一个错误提醒
import axios from "axios"
// 创建 axios 请求实例
const instance = axios.create({
baseURL: "", // 基础请求地址
timeout: 10000, // 请求超时设置
});
// 请求拦截
instance.interceptors.request.use(
config => {
// config为AxiosRequestConfig的一个实例，它是包含请求配置参数的对象
// 在这里可以在请求发送前做一些处理，如向config实例中添加属性，取消请求，设置loading等
可以设置全屏加载，可以设置令牌（token）
return config
},
// 这里是请求报错时的拦截方法，这里直接返回一个状态为reject的promise
// 实际测试时，即使前端请求报错并且未到达后端，也没有触发这里的钩子函数
error => Promise.reject(error),
)
// 响应拦截
instance.interceptors.response.use(
response=>{
return response
},
error=>{
// 对错误响应数据进行处理
return Promise.regect(error);
}
)
export default instance
13.vue配置与部署baseurl配置
环境变量
在开发的时候一般会有是三个环境：开发环境 测试环境 线上（生产）环境
vue 中有个概念就是模式，默认先vue cli 有三个模式
development开发环境模式用于 vue-cli-service serveproduction生产环境模式用于 vue-cli-service build 和 vue-cli-service test:e2etest测试环境模式用于 vue-cli-service test:unit
实际开发中：
- 本地环境（local）
- 开发环境（development）
- 测试环境（devtest）
- 预发布环境（beta）
- 生产环境（production）
创建不同的环境变量文件
通过为.env文件增加后缀来设置某个模式下特有的环境变量。
- 在项目根路径下设置 新建对应文件 .env.development（开发环境文件） .env.production（生产环境文件）.env.devtest（测试环境文件）
- 在每个文件写入(VUE_APP_随便写） VUE_APP_XIAOMING = "开发模式"
打包生产环境
1.npm run build 会生成一个dist文件夹
2.配置生产环境
（1）在vue.config.js中设置 publicPath:"./"
（2）把路由模式设置为hash
3.重新build
默认请求地址：baseurl
可以配置不同的环境变量，可以在设置请求的时候 根据不同的环境来设置不同的请求地址
1.在开发环境文件中配置我们的请求（今后开发的时候可以在其他配置文件中配置你的请求）
VUE_APP_XIAOMING = "开发模式"
VUE_APP_API = "http://localhost:8888"
2.在封装的拦截器文件中配置baseURL
let axiosurl = ""
// 如果为开发模式的话执行url
if(process.env.NODE_ENV === 'development' ){
axiosurl=process.env.VUE_APP_API
}
else{
// 否则设置成其他的模式（这里今后有很多个判断）
axiosurl=process.env.VUE_APP_API
}
// 创建axios 赋值给常量service
const service = axios.create({
baseURL: axiosurl
});
3.在今后的请求中直接写请求的路由地址就行
// 发送请求 url中请求地址前缀已经在baseURL中配置了
link("/one").then((ok)=>{
console.log(ok)
})
14.Vuex
vuex是什么？
vuex就是在vue中的统一状态（数据）管理工具 把项目下的所有数据 统一的放到这个仓库里面 组件谁想用 谁就去这个仓库里面取 没有了复杂的数据流动
vuex的5大属性---state---数据源
state的作用就是在vue中存放数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {//就是数据源 存放数据的地方
text:"我是字符串",
num:18,
bool:true,
arr:[1111,2222,3333],
obj:{
name:"xixi",
age:18
}
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
使用state中的数据： 直接读取：this.$store.state.变量名,可以在计算属性中直接读取使用
vuex的5大属性---module---模块
随着项目体积的逐渐增大，变量增多，文件中的内容也将会越来越冗余，后期维护困难也怎增大，为了避免这种情况发生，可以使用xuex的模块ban鹅绒进行拆分
- 在文件夹下创建一个store来存储我们拆分的模块
- 创建模块文件
let aboutm={
state: {//就是数据源 存放数据的地方
text:"我是字符串",
bool:true,
},
getters: {
},
mutations: {
},
actions: {
},
}
// 必须暴露
export default aboutm
- 在index.js文件中关联并使用
import Vue from 'vue'
import Vuex from 'vuex'
// 1.引用模块
import homem from "./modules/homem.js"
import aboutm from "./modules/aboutm.js"
Vue.use(Vuex)
export default new Vuex.Store({
modules: {//2配置模块
homem,
aboutm
}
})
注意：如果使用模块，读取模块中state的数据时需要加模块名：this.$store.state.模块名.xxxxx
vuex的5大属性---mutations---修改数据（同步方法）
mutations的作用就是在vuex中修改state的 如果想修改state的数据必须使用mutations来修改，mutations是一个属性，属性中包含若干个修改方法，调用mutations中的方法就必须使用commit（）进行调用
let aboutm={
state: {//就是数据源 存放数据的地方
text:"我是字符串",
bool:true,
},
getters: {},
mutations: {
我是修改函数1(state，payload){
// state，表示state中的数据
// payload，表示调用方法时传递的数据
cosnoel.log(payload.inputval)
},
我是修改函数1(){},
// ...
},
actions: {},
}
// 必须暴露
export default aboutm
组件内使用:
methods:{
fun(){
// this.$store.commit('方法名'[,参数])
this.$store.commit("NUM_LIST_ADD_DATA")
this.$store.commit("NUM_LIST_DEL_DATA",{inputval:this.inputval})
}
}
vuex5大属性---actions---异步触发器
actions是在vuex中进行异步操作的触发器，可进行异步请求的发送，在组件内使用dispatch 触发vuex的actions进行异步操作 把请求来的数据 通过commit调用mutations 修改state
mutations：{
AXIOSDATA(state,payload){
state.abc = payload.data
}
},
actions: {
// context代表的就是vuex 的store对象
AXIOS_CESHI(context,payload){
// 在actions中就可以写请求
$http({
url:payload.url,
method:"get"
}).then((ok)=>{
// 把请求来的数据通过context.commit()触发修改
context.commit("AXIOSDATA",{data:ok.data})
console.log(ok.data)
})
}
},
vuex5大属性---getters---vuex的计算属性
vuex的getters属性也就是计算属性 他和computed最大的区别就是 他处理的数据可以在任何组件直接使用 而vue的computed 处理的数据只能在当前组件使用
getters: {
// state就是上面的数据源
newtext(state){
return state.text.toUpperCase()
}
},
使用：this.$store.getters.xxx
由于本周工作内容较多，先把整理的这一部分发出来，和面继续补
