VUE全家桶（Vue-cli、Vue-route、Vuex）学习笔记

港控/mmm° 2023-10-09 15:09 56阅读 0赞

## **Es6** ##

1.  let 是变量

2.const 1. 是常量不能修改

1.  创建的时候一定要赋值 要不报错
2.  定义的类 里面的属性值可以修改

3.对象创建

1.可以先定义const name=1；

Const a=\{name\};

输出a的话就是\{“name”:1\};

1.  可以直接放进去函数

Const a=\{

Run()\{

\},

Set()\{

![33a6f636542b4078be2174c81f66d5d7.png][]

4. 遍历 遍历1 for(let i;i<data.length;i++)

遍历2 for(let i in data) //i 直接为data数据的下标

遍历3 for(let one of data) //one 直接为data相应的数据

5. 函数 ...nub //es6接收参数新特性

function A(...a)\{

console.log(a);

1.  filter函数 //筛选函数 如果函数return true 那么将返回这个值

let e=n.filter(function(a) \{

if(a>30)

return true;

\});

1.  Map函数 //统一操作
2.  Reduce(function(preValue,n),最开始的preValue值);

## **一、Vue基础知识** ##

<li v-for="item in movies">\{ \{item\}\}</li> movies:\["asdsad","asdasds","asdasdsa"\]

1.  v-once 阻止响应式
2.  v-html=”数据” 就可以智能实现将代码显示
3.  v-text=”数据” 直接将数据显示出来
4.  V-pre 将这个标签内的内容按html显示出来
5.  v-cloak 标签斗篷，等vue函数真正管理这个组件的时候 因为有的时候电脑卡vue组件加载慢 等加载完以后这标签就自动去除了 配合css使用使用\[v-cloak\]\{display:none\}
6.  v-bind:src=”data” 简写:src=”data” 动态绑定a img 标签的src属性 绑定解析data数据
7.  ![a82c10674e084e39bb149965b28d8097.png][]
8.  ![6f9504eb8b7f466c9ebb1f7fee75fd75.png][]
9.  v-for=”(item,index) in data” \{ \{item\}\} //第一个数据 第二个下标 遍历data数组来将标签增加 并且通过\{ \{item\}\} 来是内容显示到相应的标签上

1.  :style=”\{fontsize:’20px’\}” //动态绑定css属性类 如果20px不加引号那么将认为他是变量 去data中寻找 如果找不到将会报错

1.  :style=”\[data1,data2\]” //动态绑定css属性数组 data1:\{font-size:”20px”\}加引号
2.  计算属性![e4c71402202c4c159734cfc634734959.png][] 调用的时候是\{ \{zz\}\}不用加() //计算属性一般没有set方法 只读属性 get方法

13.v-on: 语法糖简写为 @click

函数传参

如果函数需要有参数

1.  如果设置了小括号

1.  有参数 那么参数为这个
2.  如果没参数那么就是undifinde

2. 如果没设置小括号

1.那么参数就是事件event

<p @click="add">+</p> //没加括号

<p @click="add()">+</p> //加括号

1.  函数获取event事件

给函数实参加上$event 接收以后就是这个事件

1.  函数冒泡事件

.stopt //停止冒泡

.prevent //阻止默认行为

@submit.prevent //阻止默认行为，没有表达式

@click.stop.prevent //串联修饰符

@keyup.enter=”onEnter” //键修饰符，键别名

@keyup.13=”onEnter” //键代码，键别名

.click.once //回调只会触发一次

![d910f8bdaa5544679e74228cc9c6bc2d.png][]

1.  v-if <p v-if="false">aaa\{ \{count\}\}</p> //如果为false那么不渲染上页面.

v-else-if

V-else

![45ba08b597c443128b474476e697a287.png][]

16.

代码复用 如果不加key的话那么复用的代码会重复显示 key值不一样的话就会避免这种情况 key值一样的话就会复用

1.  ![ca551039512042a28be5e8c105dddede.png][]

给lable标签加上for=“id” 以后点击lebel焦点自动定位到id为id的input上

1.  v-show=“true” //决定是否显示在页面上 与v-if不同的是这个是加了dispaly：none 属性 v-if 不显示的话 就是代码注释了

![be0e8ad67ac94f9a83c1f361d0187af5.png][]

1.  V-for //遍历数组 v-for=”(item,index) in data” item是遍历的数据 index是遍历数据的下标

<li v-for=”(item,index) in data”>\{ \{index\}\} \{ \{item\}\}</li>

!!!遍历数组 第一个永远是value 第二个永远是index值

!!!遍历json 第一个永远是value 第二个永远是K值 第三个永远是index值

1.  v-model //

1.数据双向绑定input标签

![637756a99d8640898db898c9e07af2b5.png][]

2.v-model与radio结合

1-如果几个input按钮 绑定的都是同一个v-model那么 name=” ”这个参数就 可以省略

2-<input type=”radio” value=”女” v-model=”sex”>

如果选中这个那么双向绑定的sex值就会是这个input的value

3.v-model与checkbox结合

1-如果被选中那么v-model就是true 相反则为false

并且可以设置小列子比如点击某个按钮以后才可以继续

![83685259a7e34c8690ad721c7ca9cbb7.png][]

2.如果panduan为![ec7b4f32a5734343964ffc5fdf5f4c62.png][]这种形式 那么v-model的 值为true 或者false

如果panduan为![b6c7f2956f9a42e5860d063ce1d87fe0.png][]这种形式，那么v-model的值为 这个复选框的value panduan的值将为一个数组

4.v-model与select结合跟v-model与radio结合一样

select如果加上属性multiple 就可以将下拉框里面的东西复选了 复选时得按ctrl键![f15790e2f16d47bab07d136df225e5e9.png][]

5. v-model修饰符 v-model.lazy //当input标签失去焦点的时候才会改变这个 v-model值

6. v-model 修饰符 v-model.number //因为v-model将得到的值自动转换为string 所以加一个修饰符的话就可以将这个字符串转化为number类型

7.v-model 修饰符 v-model.trim //可以去除字符串首尾的空格

1.  event.target.value; //目标事件中的value值

*  **Vue组件开发**

1.  创建组件构造器 //子模板中最外层必须被div标签包裹要不报错

const cpnc=Vue.extend(\{

template:\`

<div>

<p>wojinlaila</p>

</div>

\})

1.  注册组件（全剧组件）

Vue.component("cpn",cpnc);

1.  注册组件（局部组件） //在components属性中注册

const app=new Vue(\{

el:"\#aaa",

components:\{

cpn:cpnc

\})

1.  父子组件 //在组件里面写components属性

const cpnc=Vue.extend(\{

template:\`

<div>

<p>wojinlaila</p>

</div>

\`,

components:\{

aa22:cpnc1

\})

1.  应用组件
    
    1.  必须在Vue管理的组件下使用
2.  语法糖 //可以不用组件构造器 而直接用里面的数据来调用（本身就自 己运行了extend Vue组件构造器）
    
    1.

Vue.component("cpn",\{

template:\`

<div>

<p>wojinlaila</p>

</div>

\`,

components:\{

aa22:cpnc1

\});

(2)

const app=new Vue(\{

el:"\#aaa",

components:\{

cpn:\{

template:\`

<div>

<p>wojinlaila</p>

</div>

\`,

components:\{

aa22:cpnc1

\})

1.  组件模板放在 <script type="text/x-template" id="muban">里
    
    1.  格式

<div>

</div>

</script>

1.  1.  用法

components:\{

cpn:\{

template:"\#muban"//直接把script 模板标签”\#id”仍在这就 行

1.  组件放在 <template id="muban">里//跟上面那种一样
2.  组件模板常量
    
    1.  不能通过Vue中的data数据中获得
    2.  获取变量得是这样 在组件构造中应用data()\{return \{data:data\}\}函数

template:"\#muban",

data()\{

return \{

title:"woshibiaoti"

![a4f89b2164e745238e1a31730bdfe1be.png][]

1.  1.  创建一个公共变量则需要在外面定义一个obj data函数返回的时候返回 return这个obj就可以
2.  组件模板方法
    
    1.  跟组件中的方法定义一样 只是定义在了模板组件构造器中

1.  父子模块的信息传输 //用驼峰标识的话可能会报错
    
    1.  父传子方式一//数组
        
         *  给儿子定义一个props属性 props:\["title"\]
         *  调用的时候直接在模板标签里面<asd :title="title"></asd> 这样绑定
            
            1.  第一个title是子模块的props中的数据
            2.  第二个title是父模块中的数据
         *  模块中使用的时候直接跟Vue实例中使用变量的方法是一样的
    2.  父传子方式二//json
        
         *  ![b22868dde2154148b9e68fba96355d20.png][]
         *  调用方式跟数组一样
         *  Default属性//默认值
         *  required属性//必传项
    3.  数据类型是对象或者数组的时候，默认值必须是一个函数 //因为有的 会报错

![10830266109a40b4bf992e4a2aa0995a.png][]

1.  子传父

![313b7b6ec9b8426c9dcaea110cc22923.png][]

1.  1.  子：在方法函数里面设置this.$emit("自定义事件",data);

![42a96f917b6b4d969506ad574f9d18a7.png][]

1.  1.  父：在创建子模板标签里加上监听 //函数不用加括号 即使传参了也不加

![8e6b6836520e4af7b942bf1ec30344a5.png][]

1.  1.  父亲的方法里面得有参数

![bb09648de49d45aca4bb48431bec699e.png][]

1.  父子互传

![e1cbfbda5ad94478aa31f10aa01114ca.png][]

1.  父访问子
    
    1.  this.$children //添加在父亲方法里面的得到子模板的所有属性
    2.  this.$refs //给子模板标签添加ref=”自定义” 属性 父亲通过方法调用 this.$refs就可以得到这个子模板的属性
2.  子访问父
    
    1.  this.$parent //在子方法里面得到父模板的所有属性
    2.  this.$root //在子方法里面得到父模板的所有属性

1.  插槽使用
    
    1.  子模板中定义<slot>默认值</slot>这个语句
    2.  使用子模板标签时 在内部定义的内容都会传到子模板的slot中
    3.  如果调用时内部没有定义东西那么子模板中的slot标签中的东西就会变成默 认值
2.  插槽具名使用
    
    1.  <slot name="slot1">默认值</slot> //给子模板中的slot标签加上name 属性
    2.  调用子模板标签时里面的内容<button type="" slot="slot1">奥术大师</button>
    3.  如果调用调用子模板属性中的东西时 属性里面没有slot属性 或者属性不一样那么就不会套进插槽里面

![61b55a8a60064c97b66cbed27b54a686.png][]

1.  作用域插槽
    
    1.  在子模板中建立slot标签![6248f11dd5ca479baf27d01998eb9711.png][]
    2.  在父亲的中调用子模板的标签中写入template标签 并加上属性 slot-scope="slot"
    3.  调用的话直接在\{ \{slot.data\}\} 这样调用

![15d387bc21074dc887617f2e216c5727.png][]

*  **模块化**

1.  Js原生模块打包
    
    1.  <script src="asd.js" type="module"></script>
    2.  导出 //export
        
         *  ![2709df6770574964a176fa687da2d919.png][]
         *  ![f837b39084e143b2817fa160c3f515e4.png][]
         *  在导出前定义好 然后直接通过json形式全部导出
         *  如果这样导出 那么用户将自定义 接收

export default \{ \}  //导出

import app from "./vue/app"; //接收

*  1.  导入 //import
        
         *  ![abe65c1c7e984d94b2cbe4e1697c1e1b.png][]
         *  ![37a423bdfba04a399ffc904ec42766eb.png][]
 *  **Webpack //!!!如果报错几乎都是版本****问题**
    
    1.  安装 Vue2对应webpack3 //版本问题

![a124eec6ccfe499982322ca23bbef1f3.png][]

npm install webpack@3.6.0 --save-dev

1.  1.  使用
        
        1.  通过js
        2.  Js模块互相引包 如果直接用那个js文件的话 那么htm页面将不认识这个引包

必须通过webpack函数使用

创建两个文件夹 src dist 分别为源js文件夹 webpack生成的文件夹

命令：webpack ./src/asd.js ./dist/bundle11.js

1.  1.  1.  如果不想敲那么多命令行
            
             *  可以在终端的当前目录下建立 webpack.config.js文件
             *  配置文件中的代码

const path=require('path');

module.exports=\{

entry:"./src/asd.js",

output:\{

path:path.resolve(\_\_dirname,"dist"),

filename:"wangzhaoyang.js"

*   *   *   *  运行代码 直接命令行敲 webpack
         *  packjson.json启动 可以用本地的webapck防止与总版本兼容
            
             *  npm init //初始化一个 package.json的文件
             *  然后咱下图中的数据修改
             *  好处就是如果webpack版本不兼容的话可以定义内部的webpack来使用
             *  npm run build //执行命令行

![987223e018e94da881d406b00b79049c.png][]

1.  1.  webpack loader模块 //一定注意版本问题
        
        1.  安装npm依赖

npm install style-loader@0.23.1 --save-dev

1.  1.  1.  安装loader中合适的loader
            
             *  npm install --save-dev [css-loader@0.28.0][css-loader_0.28.0] //安装css模块依赖
             *  npm install less@3.9.0 --save-dev //安装less模块依赖

npm install less-loader@5.0.0 --save-dev //安装less-loader依赖 两个都得装下

*   *   *   *  npm install --save-dev [url-loader@1.1.2][url-loader_1.1.2] //安装url依赖

针对背景图关于css样式里面的url属性

*   *   *   *  npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 //安装将es6转化为es5的依赖
                
                1.  配置一下得

test: /\\.js$/,

*//exclude 排除因为不想将下面的文件转换为es5*

*//include 包括*

exclude: /(node\_modules|bower\_components)/,

use: \{

loader: 'babel-loader',

options: \{

presets: \['es2015'\] *//这里做一个修改*

*   *   *   *  npm install vue@2.5.21 --save //安装Vue依赖
                
                1.  因为装的版本是简略版run所以直接运行的话会报错得修改下面是两种修改方式
                2.  方法一：在webpack.config.js文件里面加上这一条属性 原理就是improt Vue from “vue”的时候 他不去找默认的vue文件 而去找咱们那个完整版的文件

resolve: \{

alias: \{

'vue$': 'vue/dist/vue.esm.js' *// 用 webpack 1 时需用 'vue/dist/vue.common.js'*

\},

1.  1.  1.  1.  1.  方法二：在引用Vue的时候直接

import Vue from 'vue/dist/vue.js'引用

不再是 import Vue from 'vue'这样引用

⑥npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev //安装关于.vue文件的脚手架

!!!!!!!!!!vue-loader的版本要是不对的话会产生提示这样的插件plugin错误

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

vue-template-compiler 版本号 必须！！和vue的版本统一

1.  安装完以后配置webpack.config.js文件

test: /\\.vue$/,

use: \[

loader: 'vue-loader',

\},

1.  使用vscode用户可以下载Vetur插件来快速创建vue模板

//在这里放置模板

</template>

export default \{

name:””

//这里放置除了template 的其余属性data啦啥的

</script>

</style>

1.  1.  1.  1.  1.  js文件引用vue文件

import app from "./vue/app1.vue";

1.  1.  1.  1.  1.  vue文件也可以对vue文件进行引用
                2.  如果想引用的时候省略.vue

import app from "./vue/app1";

需要配置webpack.config.js文件里的extensions属性

resolve: \{

extensions:\['.js','.css','.vue'\],//可以让你省去写.js .css .vue 文件名

alias: \{

'vue$': 'vue/dist/vue.esm.js' *// 用 webpack 1 时需用 'vue/dist/vue.common.js'* *别名 可以让你正确的寻找文件*

\},

1.  1.  1.  配置package.json中的文件 //安装的时候npm 加上--save-dev 这个语句的话人家就默认配置

"devDependencies": \{

"all": "^0.0.0",

"css-loader": "^0.28.0",

"style-loader": "^0.23.1",

"webpack": "^3.6.0"

1.  1.  1.  配置webpack.config.js文件
            
             *  下面中的有个坑 use属性 里面的东西执行顺序是从右向左执行

![45534b1a6f6b4e178c52d9f27f033690.png][]

module: \{

rules: \[

test: /\\.css$/,

use: \[ 'style-loader', 'css-loader' \]

1.  1.  1.  在要打包的js文件里面调用css

require("./css/aaa.css");

1.  1.  1.  开始启动

1.  1.  添加版权的Plugin

⑦npm install --save-dev html-webpack-plugin@3.2.0//安装将html转化到dist目录下

1.  需要配置webpack.config.js文件

const HtmlWebpackPlugin=require("html-webpack-plugin");

//然后给module.exports 里面配置属性

plugins:\[

new webpack.BannerPlugin("最终版权归王朝阳所有"),

new HtmlWebpackPlugin(\{ \})

\],

打包的文件的html文件默认是引用了这个打包后js文件的那个html

也可以自己配置 里面的属性 template那个属性就是要打包的文件

new HtmlWebpackPlugin(\{

template:"a.html"

\})

![534865a41a3544dfa328ae566f69b7e9.png][]

1.  1.  js压缩的Plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

将自动把要压缩的js文件压缩

![1ca717ea7bf345959c724b08c49d3477.png][]

1.  1.  搭建本地服务器 //vscode 中有一个live sever插件挺好使

npm install --save-dev webpack-dev-server@2.9.1

![222918f9bdf848908cd0320a5fa6d164.png][]

webpack.config.js文件里面配置

*  运行服务器方法一

直接在命令行中敲出

node\_modules\\.bin\\webpack-dev-server

*  再package.json文件夹中 script属性下 设置

"scripts": \{

"dev":"webpack-dev-server --open"

\},

其中 --open 的意思是运行服务器的时候直接打开

1.  1.  配置文件的分离

npm install webpack-merge@4.1.5 --save-dev

建立一个build文件夹 里面放置三个文件

![56d1d29fe9294da283ddd34c00cf8622.png][]

base.config.js //公共配置文件

dev.config.js //测试文件

prod.config.js //生产文件

测试文件里面的代码格式为

const uglifyJsPlugin=require("uglifyjs-webpack-plugin");

const webpackMerge=require("webpack-merge");

const baseConfig=require('./base.config')

module.exports=webpackMerge(baseConfig,\{ plugins:\[

new uglifyJsPlugin(),

\]\})

使用：在原先的package.json 文件里面自己设置的build dev属性修改

"scripts": \{

"test": "echo \\"Error: no test specified\\" && exit 1",

"build": "webpack --config ./build/prod.config.js",

"dev": "webpack-dev-server --open --config ./build/dev.config.js"

\},

在公共的webpack.config.js文件中（自己定义了一个base.config.js 就是这个东西）修改他的出口path设置 要不就会在自己刚创建的build文件夹中打包自己写的代码

output:\{

path:path.resolve(\_\_dirname,"../dist"), //在这里修改

filename:"wangzhaoyang.js"

\},

*  **Vue CLI**

1.  安装 npm install -g @vue/cli
2.  查看版本 vue -V
3.  初始化vue init webpack 项目名称 //Vue CLI2

vue create 项目名称 //Vue CLI3

如果装脚手架失败 试试下面这两个

![51ceb684713743eaae279a7f1807c03b.png][]

vue ui

*  **vue-router**

1.  使用直接初始化vue init webpack 项目名称里面选中vue-router //Vue CLI2
2.  在项目router目录有一个index.js文件

//配置路由

import Vue from 'vue'

import Router from 'vue-router'

*//* *将要显示的vue文件引入到这里*

import about from "../components/about.vue"

import home from "../components/home.vue"

//让Vue使用Router插件

Vue.use(Router)

//*配置路由和**组件**的关系*

export default new Router(\{

routes: \[

path: '/about',

component: about

\},

path: '/home',

component: home

\})

1.  使用路由 //将下面的东西放到要渲染的页面上面

<router-link to="/about">about</router-link>

<router-view></router-view>

![4b30eec184ad4c858fe2f3372f7b35d0.png][]

1.  配置的一些小细节
    
    1.  修改路由映射

routes: \[

path: '/',

redirect:"/ahome" *//可以将将上面的路由映射到这里*

\},\]

1.  1.  默认hash值 修改为htmlhistory路由

添加一条属性mode:”history”

export default new Router(\{

routes: \[

\],

mode:"history" //添加这一条

\})

1.  1.  <router-link>修改渲染的目标dom 默认a标签

加一条tag=”要渲染成的dom标签”

<router-link to="/home" tag="button">home</router-link>

1.  1.  不留下历史记录 直接添加一个replace属性

那么访问这个就不会留下浏览记录

<router-link to="/home" tag="button" replace>home</router-link>

1.  1.  如果匹配到路由以后会自动添加一个class

![2b93d4dc059244b19b3ede1680089906.png][]

修改class名方法1：

<router-link to="/home" active-class="abc">home</router-link>

修改class名方法2：

export default new Router(\{

routes: \[

\],

mode:"history",

linkActiveClass:"aac" //或者这样在这里修改

\})

1.  1.  设置跳转路由

通过添加监听 仔方法里设置下面的语句

this.$router.push("/home"); //有浏览记录

this.$router.replace("/home");//无浏览记录

如果跳转到相同路由会报错的 下面这样就没事了

this.$router.replace("/home").catch(*err* => err);

*  **动态路由**
    
    1.  配置路由

path: '/use/:name1',

component: use

\},

<router-link :to="'/use/'\+name1">use</router-link>

1.  1.  小知识
        
        1.  $routers 是路由
        2.  $route 是当前正用的路由

this.$route.params.name1;

通过这个可以得到自定义的路由name1

*  **路由的懒加载**

用到的时候才会调用

const about=()=>import("../components/about.vue")

*  **路由的嵌套**

1.  将模板引入这个路由index文件

const newabout=()=>import("../components/newabout.vue")

1.  定义路由 //children 里面子路由的path不用加”/” 否则渲染不上去

path: '/about',

component: about,

children:\[

path:"newabout", //不是"/newabout"

component:newabout

\},

path:"newhome",

component:newhome

\},

1.  使用路由 //一定要写全路由格式

<router-link to="/about/newhome">newabout</router-link>

*  **路由传参**

1.  调用路由语句

<router-link :to="\{ path:'/profile',query:\{ age:1\}\}">档案</router-link>

router-link标签中的to属性 设置为动态监听： 然后里面的东西改为json类型数据

其中query属性里面传的就是参数 /profile?age=1

1.  得到传的结果

$route.query.age

1.  js传参

dianji()\{

this.$router.push(\{

path:"/profile",

query:\{

name11:"wangzhaoyang"

\}).catch(*err* => err);

*  **路由守卫（路由钩子）**
    
    1.  全局守卫（钩子）

*//全局守卫*

*//前置钩子*

Router1.beforeEach(function(*to*,*from*,*next*)\{

document.title=*to*.meta.title; //这里meta是理由一里面的元数据 数据的话可以定义在这里

console.log(*to*);

next();

\})

*//后置钩子 没有next 不用主动进行next函数*

Router1.afterEach(function(*to*,*from*)\{

console.log("!");

\})

2.局部守卫（钩子）

beforeEnter:function(*to*,*from*,*next*)\{

console.log("我是子路由进来了");

next();

定义在路由里面 监听这一个路由 有多种守卫

next() 函数里面可以定义路由 可以定义json类型的路有数据路径啦啥的

*  **keep-live 遇见vue-router 路由缓存**
    
    1.  先将含有子路由的组件用 keep-live标签包裹住vue-router

<keep-alive>

<router-view></router-view>

</keep-alive>

1.  1.  通过建立data 数据保存 路由

data()\{

return \{

path:"/about/newabout"

\},

1.  1.  通过这两个 函数调用

activated()\{

//这行语句是防止路由重读加载报错

if (this.path === this.$route.path) return;

this.$router.push(this.path);

console.log("huoyue");

\},

beforeRouteLeave(*to*,*from*,*next*)\{

this.path=this.$route.path;

next();

1.  1.  坑 这俩函数必须被 keep-live标签包裹才能使用

！！！注意包裹的是他上一级路由的<router-view></router-view> 要不不能使用

deactivated()\{

\},

activated()\{

\},

1.  1.  include exclude

![e42943f7aebe4929b9f1ce375652083a.png][]

<keep-alive include="wa,name1">

<router-view></router-view>

</keep-alive>

*  **Promise**
    
    1.  ![2f411d3fbd2b4253af36288ab906b4c9.png][]

其中resolve是将数据传给下一个then函数 reject的话直接将数据传给最后的错误处理函数

多个路由都需要的话 那么promise.all函数 其中then中接受的参数是数组 第一个数据是第一个写的resolve函数的数据

*  **Vuex**

npm install vuex 直接安装最新的不用顾忌版本问题

1.  使用

Vue.use(Vuex) *//安装插件*

const store=new Vuex.Store(\{

*//跟data数据一样*

state:\{

counter:100

\},

*//跟方法一样*

mutations:\{

increment(*state*,*jieshow*)\{ *//通过这样设置 就可以接受参数了*

*state*.counter\+=*jieshow*;

\},

*//* *action是**处理异步的mutations* *用来放一些请求或者异步操作*

actions:\{

\},

*//跟计算方法一样*

getters:\{

powercount(*state*)\{

return function(*age*)\{

return *age*

\};

\},

*//这里可以以json的形式保存以上各种形式 将上面的东西模块化了*

modules:\{

\})

export default store

1.  渲染进 main.js 函数里面

new Vue(\{

el: '\#app',

store, //通过组件渲染进Vue全局里面这样就可以全局使用

components: \{ App \},

template: '<App/>'

\})

使用mutations

this.$store.commit("increment",13); //第二个值为参数

特殊的提交风格

![1024b19218af40c7a8a6290c6186518d.png][]

使用getters //相当于计算方法

$store.getters.powercount(12) //这样写就可以传参数了

getters:\{

powercount(*state*)\{

return function(*age*)\{  //通过这样设置 就可以接受参数了

return *age*

\};

action的使用方法

![3e4df174742d4a30bcd18f6f59b0d4ec.png][]

modules

![29ba47c41b5c4c90b9e9a1f1049c7154.png][]

![98760fff8d594506913d197134407891.png][]

mutation使用

![cf45086b8e60403ba044e9da46f6e225.png][]

*  **Axios**

**csdn 最全的讲解** [axios详解\_Hello Simon的博客-CSDN博客][axios_Hello Simon_-CSDN]

1.基本实现方法

*//**1.**执行GET请求*

import axios from 'axios'

axios.get('/user?ID=12345') *//返回的是一个Promise*

.then(*res*=>console.log(*res*))

.catch(*err*=>console.log(*err*));

*//**2.**可配置参数的方式*

axios.get('/user',\{

params:\{

ID:12345

\}).then(*res*=>console.log(*res*))

.catch(*err*=>console.log(*err*));

2.并发方法 加上

*//发送多个请求(并发请求)，类似于promise.all，若一个请求出错，那就会停止请求*

const get1 = axios.get('/user/12345');

const get2 = axios.get('/user/12345/permission');

axios.all(\[get1,get2\])

.then(axios.spread((*res1*,*res2*)=>\{

console.log(*res1*,*res2*);

\}))

.catch(*err*=>console.log(*err*))

axios.spread /可以将数据结构为res1 ,res2

axios.spread((*res1*,*res2*)=>\{

console.log(*res1*,*res2*);\})

3.可用axios,create(\[config\])来创建一个新的实例，并设置相关属性

const instance = axios.create(\{

baseURL: 'http://localhost:3000/api/products',

timeout: 1000,

headers: \{ 'X-Custom-Header':'foobar'\}

\});

*//instance的使用*

instance.get('/user',\{

params:\{ ID:12345\}

\}).then(*res*=>console.log(*res*))

.catch(*err*=>console.log(*err*))

1.  拦截器interceptors

*//添加一个请求拦截器*

axios.interceptors.request.use(*config*=>\{

*//在请求之前做一些事*

return *config*; //！！！！！！必须return要不报错

\},*err*=>\{

*//请求错误的时候做一些事*

return Promise.reject(*err*);

\});

*//添加一个响应拦截器*

axios.interceptors.response.use(*response*=>\{

*//对返回的数据做一些处理*

reutrn *response*; //！！！！！！必须return要不报错

\},*err*=>\{

*//对返回的错误做一些处理*

return Promise.reject(*err*);

\});

[33a6f636542b4078be2174c81f66d5d7.png]: https://img-blog.csdnimg.cn/33a6f636542b4078be2174c81f66d5d7.png
[a82c10674e084e39bb149965b28d8097.png]: https://img-blog.csdnimg.cn/a82c10674e084e39bb149965b28d8097.png
[6f9504eb8b7f466c9ebb1f7fee75fd75.png]: https://img-blog.csdnimg.cn/6f9504eb8b7f466c9ebb1f7fee75fd75.png
[e4c71402202c4c159734cfc634734959.png]: https://img-blog.csdnimg.cn/e4c71402202c4c159734cfc634734959.png
[d910f8bdaa5544679e74228cc9c6bc2d.png]: https://img-blog.csdnimg.cn/d910f8bdaa5544679e74228cc9c6bc2d.png
[45ba08b597c443128b474476e697a287.png]: https://img-blog.csdnimg.cn/45ba08b597c443128b474476e697a287.png
[ca551039512042a28be5e8c105dddede.png]: https://img-blog.csdnimg.cn/ca551039512042a28be5e8c105dddede.png
[be0e8ad67ac94f9a83c1f361d0187af5.png]: https://img-blog.csdnimg.cn/be0e8ad67ac94f9a83c1f361d0187af5.png
[637756a99d8640898db898c9e07af2b5.png]: https://img-blog.csdnimg.cn/637756a99d8640898db898c9e07af2b5.png
[83685259a7e34c8690ad721c7ca9cbb7.png]: https://img-blog.csdnimg.cn/83685259a7e34c8690ad721c7ca9cbb7.png
[ec7b4f32a5734343964ffc5fdf5f4c62.png]: https://img-blog.csdnimg.cn/ec7b4f32a5734343964ffc5fdf5f4c62.png
[b6c7f2956f9a42e5860d063ce1d87fe0.png]: https://img-blog.csdnimg.cn/b6c7f2956f9a42e5860d063ce1d87fe0.png
[f15790e2f16d47bab07d136df225e5e9.png]: https://img-blog.csdnimg.cn/f15790e2f16d47bab07d136df225e5e9.png
[a4f89b2164e745238e1a31730bdfe1be.png]: https://img-blog.csdnimg.cn/a4f89b2164e745238e1a31730bdfe1be.png
[b22868dde2154148b9e68fba96355d20.png]: https://img-blog.csdnimg.cn/b22868dde2154148b9e68fba96355d20.png
[10830266109a40b4bf992e4a2aa0995a.png]: https://img-blog.csdnimg.cn/10830266109a40b4bf992e4a2aa0995a.png
[313b7b6ec9b8426c9dcaea110cc22923.png]: https://img-blog.csdnimg.cn/313b7b6ec9b8426c9dcaea110cc22923.png
[42a96f917b6b4d969506ad574f9d18a7.png]: https://img-blog.csdnimg.cn/42a96f917b6b4d969506ad574f9d18a7.png
[8e6b6836520e4af7b942bf1ec30344a5.png]: https://img-blog.csdnimg.cn/8e6b6836520e4af7b942bf1ec30344a5.png
[bb09648de49d45aca4bb48431bec699e.png]: https://img-blog.csdnimg.cn/bb09648de49d45aca4bb48431bec699e.png
[e1cbfbda5ad94478aa31f10aa01114ca.png]: https://img-blog.csdnimg.cn/e1cbfbda5ad94478aa31f10aa01114ca.png
[61b55a8a60064c97b66cbed27b54a686.png]: https://img-blog.csdnimg.cn/61b55a8a60064c97b66cbed27b54a686.png
[6248f11dd5ca479baf27d01998eb9711.png]: https://img-blog.csdnimg.cn/6248f11dd5ca479baf27d01998eb9711.png
[15d387bc21074dc887617f2e216c5727.png]: https://img-blog.csdnimg.cn/15d387bc21074dc887617f2e216c5727.png
[2709df6770574964a176fa687da2d919.png]: https://img-blog.csdnimg.cn/2709df6770574964a176fa687da2d919.png
[f837b39084e143b2817fa160c3f515e4.png]: https://img-blog.csdnimg.cn/f837b39084e143b2817fa160c3f515e4.png
[abe65c1c7e984d94b2cbe4e1697c1e1b.png]: https://img-blog.csdnimg.cn/abe65c1c7e984d94b2cbe4e1697c1e1b.png
[37a423bdfba04a399ffc904ec42766eb.png]: https://img-blog.csdnimg.cn/37a423bdfba04a399ffc904ec42766eb.png
[a124eec6ccfe499982322ca23bbef1f3.png]: https://img-blog.csdnimg.cn/a124eec6ccfe499982322ca23bbef1f3.png
[987223e018e94da881d406b00b79049c.png]: https://img-blog.csdnimg.cn/987223e018e94da881d406b00b79049c.png
[css-loader_0.28.0]: mailto:css-loader@0.28.0
[url-loader_1.1.2]: mailto:url-loader@1.1.2
[45534b1a6f6b4e178c52d9f27f033690.png]: https://img-blog.csdnimg.cn/45534b1a6f6b4e178c52d9f27f033690.png
[534865a41a3544dfa328ae566f69b7e9.png]: https://img-blog.csdnimg.cn/534865a41a3544dfa328ae566f69b7e9.png
[1ca717ea7bf345959c724b08c49d3477.png]: https://img-blog.csdnimg.cn/1ca717ea7bf345959c724b08c49d3477.png
[222918f9bdf848908cd0320a5fa6d164.png]: https://img-blog.csdnimg.cn/222918f9bdf848908cd0320a5fa6d164.png
[56d1d29fe9294da283ddd34c00cf8622.png]: https://img-blog.csdnimg.cn/56d1d29fe9294da283ddd34c00cf8622.png
[51ceb684713743eaae279a7f1807c03b.png]: https://img-blog.csdnimg.cn/51ceb684713743eaae279a7f1807c03b.png
[4b30eec184ad4c858fe2f3372f7b35d0.png]: https://img-blog.csdnimg.cn/4b30eec184ad4c858fe2f3372f7b35d0.png
[2b93d4dc059244b19b3ede1680089906.png]: https://img-blog.csdnimg.cn/2b93d4dc059244b19b3ede1680089906.png
[e42943f7aebe4929b9f1ce375652083a.png]: https://img-blog.csdnimg.cn/e42943f7aebe4929b9f1ce375652083a.png
[2f411d3fbd2b4253af36288ab906b4c9.png]: https://img-blog.csdnimg.cn/2f411d3fbd2b4253af36288ab906b4c9.png
[1024b19218af40c7a8a6290c6186518d.png]: https://img-blog.csdnimg.cn/1024b19218af40c7a8a6290c6186518d.png
[3e4df174742d4a30bcd18f6f59b0d4ec.png]: https://img-blog.csdnimg.cn/3e4df174742d4a30bcd18f6f59b0d4ec.png
[29ba47c41b5c4c90b9e9a1f1049c7154.png]: https://img-blog.csdnimg.cn/29ba47c41b5c4c90b9e9a1f1049c7154.png
[98760fff8d594506913d197134407891.png]: https://img-blog.csdnimg.cn/98760fff8d594506913d197134407891.png
[cf45086b8e60403ba044e9da46f6e225.png]: https://img-blog.csdnimg.cn/cf45086b8e60403ba044e9da46f6e225.png
[axios_Hello Simon_-CSDN]: https://blog.csdn.net/qq_31947477/article/details/106328200