慢慢来,是种诚意,加载中 . . .

vue进阶学习


Vue进阶

🌍🌎🌏🌐🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜☀🌝🌞⭐🌟🌠☁⛅☔⚡❄🔥💧🌊

1.Axios(网络请求库)

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax

  • 是一个基于promise(承诺)的HTTP网络请求库
  • 可以用于浏览器和node.js项目
  • vue官方推荐的请求库,从以前的vue-resourceaxios

通俗点说就是对JavaScripthttp请求的二次封装,就类似jQueryajax

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

请求方式

  • get请求 获取数据
  • post请求 提交数据
  • put请求 更新数据
  • patch请求 更新部分数据
  • delete请求 删除数据

mock数据

Mock.js 0.1 文档

mock数据的基础使用

一、应用场景

  在我们自己做一个项目时,会遇到后端还没完成数据输出或者接口没写好的情况。你没有办法想后台获取数据,这时候需要前端只好自己写静态模拟数据(假数据)。

mockjs就是用来创造假数据的,他的用法和从后端取数据是基本一样的,基本的语法看下文,移步官方文档。

如果数据太长了,将数据写在js文件里,完成后挨个改url。

某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。

想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。特殊的格式,例如IP,随机数,图片,地址,需要去收集整理。

二、mock优点

1、前后端分离:让前端工程师独立于后端进行开发。

2、增加单元测试的真实性:通过随机数据,模拟各种场景。

3、开发无侵入:不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。

4、用法简单:符合直觉的接口。

5、数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

6、方便扩展:支持支持扩展更多数据类型,支持自定义函数和正则。

7、在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。

三、mock的基本使用

需要引用mock.js,引入方法其实和JQ这样的类库一样。可以直接引入

//直接引入
<script src="http://mockjs.com/dist/mock.js"></script>
//在js简单造数据  
Mock.mock('http://g.cn',{
    'name':'@NAME',
    'color':'@COLOR',
    'email':'@EMAIL'
})
//和JQ一起使用
$.ajax({
    url:'http://g.cn'
}).done(function(data,status,xhr){
    console.log(data)
})
//打印出来如下
    {
    "name": "Donna Williams",
    "color": "#f2797c",
    "email": "p.oilvqf@eqonsg.ke"
}

也可使用npm下载后,模块化引入,具体操作如下:

1、安装mockJS

cnpm install mockjs -S

2、使用mockJS(mock/index.js)

import Mock from "mock";

3、官方文档

https://github.com/nuysoft/Mock/wiki/Syntax-Specification

4、Mock.mock

Mock.mock([rurl],[rtype],[template|function(options)])

 这里的参数都是可选:

rurl(可选)。
表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /shoopList

rtype(可选)。
表示需要拦截的 Ajax 请求类型。例如 GETPOSTPUTDELETE 等。

template(可选)。
表示数据模板,可以是对象或字符串。例如 { ‘data|1-10:[{}] }

function(options)(可选)。
表示用于生成响应数据的函数。

options:指向本次请求的 Ajax 选项集

5、模拟接口返回数据

//定义数据
const data = Mock.mock({
    "data|20": [{
        "goodsId|+1": 1,
        "goodsName": "@ctitle(10)",
        "goodsTel": /^1(5|3|7|8)[0-9]{9}$/,
        "goodsAddress": "@county(true)",
        "goodsLogo": "@Image('200x100', 'EasyMock')",
    }]
})

//模拟数据接口

Mock.mock(/\/shoopList/,"post",function(options){
    console.log(options);
    return data

})

/*
  输出的options的值为
    url:"请求的地址"
    type:"请求的类型"
    body:post提交的数据
*/

安装

中文网站:https://www.kancloud.cn/yunye/axios/234845

安装: https://unpkg.com/axios/dist/axios.min.js


使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GET方式的请求

//发送GET方式请求
 axios.get("http://localhost:8080/user/findAll?name=codecheng").then(function(response){
     console.log(response.data);
 }).catch(function(err){
     console.log(err);
 });

POST方式请求

//发送POST方式请求
   axios.post("http://localhost:8080/user/findAll?name=codecheng",{
       username:"codecheng",
       age:20,
       email:"codecheng2021@gmail.com",
       phone:xxxxxxxxxxx
   }).then(function(response){
       console.log(response.data);
   }).catch(function(err){
       console.log(err);
   });

axios并发请求

并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

//1.创建一个查询所有请求
   function findAll(){
       return axios.get("http://localhost:8080/user/findAll?name=codecheng");
   }

   //2.创建一个保存的请求
   function save(){
       return axios.post("http://localhost:8080/user/save",{
           username:"小Dai~",
           age:19,
           email:"xxx@qq.com",
           phone:xxxxxxxxxxx
       });
   }

   //3.并发执行
   axios.all([findAll(),save()]).then(
       axios.spread(function(res1,res2){  //用来将一组函数的响应结果汇总处理
           console.log(res1.data);
           console.log(res2.data);
       })
   );//用来发送一组并发请求

2.Vue中的路由 (Vue Router)

使用路由来实现页面切换,根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

作用:在vue中实现组件之间的动态切换

使用路由

  1. 引入路由
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js
  2. 创建组件对象
    //声明组件模板
    const login = {
      template:'<h1>登录</h1>'
    };
    
    const register = {
      template:'<h1>注册</h1>'
    };
    
  3. 定义路由对象的规则
     //创建路由对象
    const router = new VueRouter({
      routes:[
        {path:'/login',component:login},   //path: 路由的路径  component:路径对应的组件
        {path:'/register',component:register}
      ]
    });
  4. 将路由对象注册到vue实例
    const app = new Vue({
      el: "#app",
      data: {
        username:"codecheng",
      },
      methods: {},
      router:router   //设置路由对象
    });
  5. 在页面中显示路由的组件
    <!--显示路由的组件-->
    <router-view></router-view>
  6. 根据连接切换路由
    <a href="#/login">点我登录</a>
    <a href="#/register">点我注册</a>

router-link使用

实例化vue的时候,属性里面的 router传入一个 VueRouter 的实例,这个数组routes就是详细的路径和对应的组件信息,比如我们浏览器访问 www.codecheng.com/writeback的时候,页面就展示上面定义好的 writeback组件

let vm = new Vue({
    el: '#app',
    data() {
    },
    router: new VueRouter({
        routes: [
            {
                path: '/writeback',
                component: writeback
            },
            {
                path: '/aite',
                component: aite
            },
            {
                path: '/zan',
                component: zan
            },
        ],
    })
})

好处:就是可以自动给路由路径加入#不需要手动加入

<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register" tag="button">点我注册</router-link>
# 总结:
	1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
	2.router-link to属性用来书写路由路径   tag属性:用来将router-link渲染成指定的标签

13.5 默认路由

作用:用来在第一次进入界面是显示一个默认的组件

const router = new VueRouter({
  routes:[
    //{ path:'/',component:login},
    { path:'/',redirect:'/login'},  //redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示  推荐使用
    { path:'/login', component:login},
    { path:'/register', component:register},
  ]
});

13.6 路由中参数传递

  • 第一种方式传递参数 传统方式
  1. 通过?号形式拼接参数

    <router-link to="/login?id=21&namecodecheng">我要登录</router-link>
  2. 组件中获取参数

    const login = {
      template:'<h1>用户登录</h1>',
      data(){return {}},
      methods:{},
      created(){
        console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
      }
    };
  • 第二种方式传递参数 restful
  1. 通过使用路径方式传递参数

    <router-link to="/register/20/codecheng">我要注册</router-link>
    var router = new VueRouter({
      routes:[
        {path:'/register/:id/:name',component:register}   //定义路径中获取对应参数
      ]
    });
  2. 组件中获取参数

    const register = {
      template:'<h1>用户注册{{ $route.params.name }}</h1>',
      created(){
        console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
      }
    };

13.7 嵌套路由

  1. 声明最外层和内层路由
    <template id="product">
        <div>
            <h1>商品管理</h1>
    
            <router-link to="/product/add">商品添加</router-link>
            <router-link to="/product/edit">商品编辑</router-link>
    
            <router-view></router-view>
    
        </div>
    </template>
    
    //声明组件模板
    const product={
      template:'#product'
    };
    
    const add = {
      template:'<h4>商品添加</h4>'
    };
    
    const edit = {
      template:'<h4>商品编辑</h4>'
    };
  2. 创建路由对象含有嵌套路由
    const router = new VueRouter({
            routes:[
                {
                    path:'/product',
                    component:product,
                    children:[
                        {path:'add',component: add},
                        {path:'edit',component: edit},
                    ]
                },
            ]
        });
  3. 注册路由对象
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router,//定义路由对象
    });
  4. 测试路由

    <router-link to="/product">商品管理</router-link>
    <router-view></router-view>

路由拓展说明

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反 掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

安装

npm install vue-router --save-dev

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

import Vue from 'vue'
import VueRouter from 'vue-router'
// 显示的使用
Vue.use(VueRouter);
  1. components 目录下存放我们自己编写的组件
  2. 定义组件 Content.vue 组件
<template>
	<div>
		<h1>
			内容页
		</h1>
	</div>
</template>
<script>
	export
default {
		name:
		"Content"
	}
</script>
  1. 安装路由,在src目录下,新建一个文件夹 : router ,专门存放路由,写入 index.js
import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
// 导入上面定义的组件
import Content from '../components/Content'
// 安装路由
Vue.use(Router);
// 配置路由
export
default new Router({
        routes:
        [{
            // 路由路径
            path:
            '/content',
            // 路由名称
            name: 'content',
            // 跳转到组件
            component: Content
        }]
    });
  1. 在新建一个 Main.vue 组件
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
  1. 将Main组件也配置到路由中!
import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
// 导入上面定义的组件
import Content from '../components/Content'import Main from '../components/Main'
// 安装路由
Vue.use(Router);
// 配置路由
export
default new Router({
        routes:
        [{
            // 路由路径
            path:
            '/content',
            // 路由名称
            name: 'content',
            // 跳转到组件
            component: Content
        },
        {
            // 路由路径
            path: '/main',
            // 路由名称
            name: 'main',
            // 跳转到组件
            component: Main
        }]
    });
  1. main.js中配置路由
import Vue from 'vue'
import App from './App'
// 导入上面创建的路由配置目录
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
})
  1. App.vue 中使用路由
<template>
<div id="app">
<!--
router-link: 默认会被渲染成一个 <a> 标签,to 属性为指定链接
router-view: 用于渲染路由匹配到的组件
-->
<router-link to="/main">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
</template>

启动测试一下 : npm run dev

路由模式与404

路由模式有两种:

修改路由配置,代码如下:

export default new Router({
mode: 'history',
routes: [
]
});

处理 404 创建一个名为 NotFound.vue 的视图组件,代码如下:

<template>
<div>
页面不存在,请重试!
</div>
</template>
<script>
export default {
name: "NotFount"
}
</script>
<style scoped>
</style>

修改路由配置,代码如下:

import NotFound from '../components/NotFound'
{
path: '*',
component: NotFound
}

3.Vue CLI 脚手架(🌙重要)

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板 ;

脚手架:其实就是一个配置好了的使用webpack完成打包构建的初始化工程,和我们前面讲的webpack打包没啥区别,只是更为全面,在实际开发中也是常用的工具

当前最新版本为 vue-cli4 但是和 cli3区别不大所以两个版本都是可以使用的

全局安装cli,确保你已经安装了node

💐🌸💮🌹🌺🌻🌼🌷🌱🌲🌳🌴🌵🌾🌿🍀🍁🍂🍃

预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这 个骨架项目就是脚手架,我们的开发更加的快速;

什么是CLI

命令行界面(英语:command-line interface,缩写:CLI是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。

主要的功能 :

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

Vue CLI安装

1. 环境准备
# 1.下载nodejs
	http://nodejs.cn/download/
		windows系统:   .msi  安装包(exe)指定安装位置   .zip(压缩包)直接解压缩指定目录

# 2.配置nodejs环境变量
	1.windows系统:
	 	计算上右键属性---->  高级属性 ---->环境变量 添加如下配置:
		NODE_HOME=  nodejs安装目录
        PATH    = xxxx;%NODE_HOME%

# 3.验证nodejs环境是否成功
	node -v 

# 4.npm介绍
	node package mangager   nodejs包管理工具       前端主流技术  npm 进行统一管理
	maven 管理java后端依赖    远程仓库(中心仓库)      阿里云镜像
	npm   管理前端系统依赖     远程仓库(中心仓库)      配置淘宝镜像

# 5.配置淘宝镜像
	  npm config set registry https://registry.npm.taobao.org
	  npm config get registry

# 6.配置npm下载依赖位置
	 windows:
		npm config set cache "D:\nodereps\npm-cache"
		npm config set prefix "D:\nodereps\npm_global"

# 7.验证nodejs环境配置
	npm config ls
 ; userconfig C:\Users\Daly\.npmrc
cache = "D:\\nodereps\\npm-cache"
prefix = "D:\\nodereps\\npm_global"
registry = "https://registry.npm.taobao.org/"

安装脚手架

# 0.卸载脚手架
	npm uninstall -g @vue/cli  //卸载3.x版本脚手架
	npm uninstall -g vue-cli  //卸载2.x版本脚手架

# 1.Vue Cli官方网站
	https://cli.vuejs.org/zh/guide/

# 2.安装vue Cli
	npm install -g vue-cli

创建脚手架项目

# 1.创建vue脚手架第一个项目
	vue init webpack 项目名
# 2.创建第一个项目
	hello     ------------->项目名
    -build  ------------->用来使用webpack打包使用build依赖  构建一些依赖文件
    -config ------------->用来做整个项目配置目录   主要用来对 开发 测试 环境进行配置
    -node_modules  ------>用来管理项目中使用依赖
    -src					 ------>用来书写vue的源代码[重点]
    	+assets      ------>用来存放静态资源 [重点]
      	components   ------>用来书写Vue组件 [重点]
      	router			 ------>用来配置项目中路由[重点]
      	App.vue      ------>项目中根组件[重点]
      	main.js      ------>项目中主入口[重点]
    -static        ------>其它静态
    -.babelrc      ------> 将es6语法转为es5运行
    -.editorconfig ------> 项目编辑配置
    -.gitignore    ------> git版本控制忽略文件
    -.postcssrc.js ------> 源码相关js
    -index.html    ------> 项目主页
    -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件

# 3.如何运行在项目的根目录中执行
	npm start 运行前端系统

# 4.如何访问项目
	http://localhost:8088    

# 5.Vue Cli中项目开发方式
	 注意: 一切皆组件   一个组件中   js代码  html代码  css样式
	 	1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
	 	2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件	  

👦👧👨👩👴👵👶👱👮👲👳👷👸💂🎅👰👼💆💇🙍🙎🙅🙆💁🙋🙇🙌🙏👤👥🚶🏃👯💃👫👬👭💏💑👪

vue-cli 目录结构

  • build 和 config:WebPack 配置文件

  • node_modules:用于存放 npm install 安装的依赖文件

  • src: 项目源码目录

  • static:静态资源文件

  • .babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5

  • .editorconfig:编辑器配置 eslintignore:需要忽略的语法检查配置文件

  • .gitignore:git 忽略的配置文件

  • .postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法

  • index.html:首页,仅作为模板页,实际开发时不使用

  • package.json:项目的配置文件

    • name:项目名称
    • version:项目版本
    • description:项目描述
    • author:项目作者
    • scripts:封装常用命令
    • dependencies:生产环境依赖
    • devDependencies:开发环境依赖

    src目录

    main.js项目的入口文件,我们知道所有的程序都会有一个入口

    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false;
    
    
    new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
    })
    
    
  • import Vue from 'vue' :ES6 写法,会被转换成 require(“vue”); (require 是 NodeJS 提供 的模块加载器)

  • import App from './App':意思同上,但是指定了查找路径,./ 为当前目录

  • Vue.config.productionTip = false :关闭浏览器控制台关于环境的相关提示

  • new Vue({...}) :实例化 Vue

  • el: '#app' :查找 index.html 中 id 为 app 的元素

  • template: '':模板,会将 index.html 中 替换为

  • components: { App } :引入组件,使用的是 import App from ‘./App’ 定义的 App 组 件;

app.vue

<template>
	<div id="app">
		<img src="./assets/logo.png">
		<HelloWorld/>
	</div>
</template>
<script>
	import HelloWorld from './components/HelloWorld'export
default {
		name:
		'App',
		components: {
			HelloWorld
		}
	}
</script>
<style>
	#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing:
	antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color:
	#2c3e50; margin-top: 60px; }
</style>
  • template:HTML 代码模板,会替换 < App /> 中的内容
  • import HelloWorld from ‘./components/HelloWorld’:引入 HelloWorld 组件用于替换 template 中的 < HelloWorld/>
  • export default{…}:导出 NodeJS 对象,作用是可以通过 import 关键字导入
    • name: ‘App’:定义组件的名称
    • components: { HelloWorld }:定义子组件
  • 在hello,Vue中,关于 < style scoped> 的说明:CSS 样式仅在当前组件有效,声明了样式的作用域, 是当前的界面私有的!

在脚手架中使用axios

# 1.安装axios
	npm install axios --save

# 2.配置main.js中引入axios
	import axios from 'axios';
	Vue.prototype.$http=axios;

# 3.使用axios
	在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})

Vue Cli脚手架项目部署

# 1.在项目根目录中执行如下命令:
	vue run build
	注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

# 2.打包之后当前项目中变化
	在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

4.VueX 状态管理

VueX的了解

# 1.简介
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

# 2.安装vuex
-	npm install vuex --save

# 3.创建vue cli中创建store文件夹

image-20201226214407298

# 4.在stroe中创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
//1.安装vuex
Vue.use(Vuex);
//2.创建store对象
const store = new Vuex.Store({
  
});
//3.暴露store对象
export default store;
# 5.在main.js中引入stroe并注册到vue实例
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./stroe";//引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store,//注册状态
})

state属性

# 1.state属性
- 作用: 用来全局定义一些共享的数据状态

# 2.语法
    const store = new Vuex.Store({
    	state:{
    		counter:0,//定义共享状态
    	},
    }

# 3.使用
	 {{$store.state.counter}} ===> {{this.$store.state.counter}}

mutations 属性

# 1.mutations 属性
- 作用: 用来定义对共享的数据修改的一系列函数

# 2.语法
    const store = new Vuex.Store({
      state:{
        counter:0,//定义共享状态
      },
      mutations:{
        //增加
        increment(state){
          state.counter++
        },
        //减小
        decrement(state){
          state.counter--
        }
      }
    });

# 3.使用
	this.$store.commit('decrement');
	this.$store.commit('increment');

# 4.mutations传递参数

- a.定义带有参数的函数
			mutations:{
     		//addCount 参数1:state 对象 参数2:自定义参数
     		addCount(state,counter){
        	console.log(counter);
        	return  state.counter += counter ;
      	}
    	}
- b.调用时传递参数
		this.$store.commit('addCount',11);

getters 属性

# 1.getters 属性
- 官方:  允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据	
	它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
- 作用: 用来定义对共享的数据的计算相关的一系列函数 相当于 computed 属性 会对结果进行缓存

# 2.语法
	  getters:{
      //平方
      mathSqrts(state){
        console.log("--------");
        return state.counter*state.counter;
      },
      //乘以一个数字
      mathSqrtsNumber(state,getters){
        return getters.mathSqrts*3;
      },
      //传递参数
      mathSqrtsNumbers(state,getters){
        return function (number){
          return  number;
        }
      }
    }

# 3.使用
-		1.{{$store.getters.mathSqrts}}
-   2.{{$store.getters.mathSqrtsNumber}}
-   3.{{$store.getters.mathSqrtsNumbers(3)}}


评论
  目录