相关资料

  1. vue-cli脚手架: https://cli.vuejs.org/zh/
  2. vue官网: https://cn.vuejs.org/v2/guide/index.html

(一) 创建和配置项目

(1) 安装vue-cli脚手架

  1. npm install -g @vue/cli

(2) 查看vue脚手架版本

  1. vue --version

(3) 创建一个新项目

官网文档地址

  1. vue create hello-world  // 1.创建项目
  1. cd hello-world  // 2.进入项目文件夹
  2. npm run serve        // 3.运行项目

若出现一下问题: 安装10.0版本的nodejs可以解决问题
nodejs下载地址: https://npm.taobao.org/mirrors/node
image.png

(4) hello-world项目目录结构

  1. 单页应用single-page application,简称 SPA, hello-world项目中在public文件夹有一个index.html也是项目中唯一一个html文件
  2. src文件夹: 源码文件夹, 我们将在这个文件去编写代码
  3. .gitignore: 记录哪些文件不提交

  4. babel.config.js: babel是用来将es6转成js5的工具, 这个文件是这个工具的配置

    (5) vue组件

  5. 父组件 ```javascript

  2. 2. 子组件
  3. ```javascript
  4. <template>
  5.   <div class="footer">
  6.       <span>{{tab}}</span>
  7.       <span>影院</span>
  8.       <span>我的</span>
  9.   </div> 
  10. </template>
  12. <script>
  13. export default {
  14.     data() {
  15.         return {
  16.             tab: '首页'
  17.         }
  18.     },
  19.     created() {
  20.         console.log('footer组件')
  21.     }
  22. }
  23. </script>
  25. <style>
  26. .footer{
  27.     position: fixed;
  28.     bottom: 0;
  29.     height: 50px;
  30.     width: 100%;
  31.     display: flex;
  32.     justify-content: space-around;
  33. }
  34. </style>

(6) 禁用eslint

  1. // 根目录新增vue.config.js
  2. module.exports = {
  3.     lintOnSave: false
  4. }

(7) devtool

vue开发调试工具

  1. 下载 http://soft.huruqing.cn

  2. 添加到chrome扩展程序里

    (8) 查看webpack配置

    vue inspect > output.js

    (二) 添加less支持

  3. npm install less less-loader@6.0.0 —save-dev

  4. 在vue文件这样写即可, scoped表示样式只在当前文件有效, 不会影响其他组件

    1. <style lang="less" scoped>
    2. #app {
    3.  a {margin-left: 15px;}
    4. }
    5. </style>

    image.png
    出现这个问题是因为less-loader版本太高, 执行这两步操作即可

  5. npm uninstall less-loader

  6. npm install less-loader@6.0.0

    (三) vue路由配置

    (1)一个简单路由配置

  7. npm i vue-router

  8. 在src内创建router文件夹, 新建index.js(代码如下)
  9. 在src创建views文件夹, 存放各个模块的组件, components文件夹存放的公共的组件
  10. 在main.js里, 把router挂载到vue的实例
  11. 配置路由出口, 详见下方第(2)点router-view
  12. 使用router-link进行跳转, 详见下方第(3)点路由跳转
  1. // router/index.js
  2. import Vue from "vue";
  3. import Router from "vue-router";
  4. Vue.use(Router);
  6. export default new Router({
  7.   routes: [
  8.     {
  9.       path: "/",
  10.       redirect: "/index"
  11.     },
  12.     {
  13.       path: "/cart",
  14.       component: () => import("@/views/cart/index")
  15.     },
  16.     {
  17.       path: "*",
  18.       component: () => import("@/views/components/NotFound")
  19.      },
  20.   ]
  21. })
  1. // main.js 代码
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import router from './router/index'
  6. Vue.config.productionTip = false
  8. new Vue({
  9.   // 把router挂载到vue实例
  10.   router,
  11.   render: h => h(App),
  12. }).$mount('#app')

(2) router-view

  1. 路由出口
  2. 路由匹配到的组件将渲染在这里

  3. 在app.vue配置

    1. <template>
    2. <div id="app">
    3.  <img alt="Vue logo" src="./assets/logo.png" />
    5.  <!-- 路由出口 -->
    6.  <!-- 路由匹配到的组件将渲染在这里 -->
    7.  <router-view></router-view>
    8.  <!-- 在页面显示子组件 -->
    9.  <Footer></Footer>
    10. </div>
    11. </template>
    13. <script>
    14. // 导入子组件
    15. import Footer from "@/components/Footer";
    16. export default {
    17. name: "App",
    18. // 注册组件
    19. components: {
    20.  Footer
    21. }
    22. };
    23. </script>
    24. <style>
    25. #app {
    26. text-align: center;
    27. margin-top: 60px;
    28. }
    29. </style>

    (3) 路由跳转

    ```javascript // 方式一 cart

// 方式二 this.$router.push(‘/cart’);

  3. <a name="cI4Wm"></a>
  4. ### (4) 子路由配置
  5. 使用子路由进行模块路由配置，结构比较分明<br />比如我们的网站有商品模块,有列表页面和详情页面, 路由如下<br />/product   商品模块总路由<br />/prodcut/list   子路由<br />/product/detail   子路由
  7. ```javascript
  8. {
  9.     path: '/product',
  10.     component: () => import('@/views/product/index'),
  11.     children: [
  12.         {
  13.             path: 'list',
  14.             component: ()=>import('@/views/product/children/list')
  15.         },
  16.         {
  17.             path: 'detail',
  18.             component: ()=>import('@/views/product/children/detail')
  19.         }
  20.     ]
  21. }

(5) active-class

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

  1. 只要路由中包含to里面的路由, 就能匹配到, 就会高亮, 比如: /product, /product/list, /product/detail都会使下面的第二个router-link高亮
  2. exact 表示精确匹配, 只有路由完全一样才能被匹配
    1. <router-link to="/" active-class="on" exact>首页</router-link>
    2. <router-link to="/product" active-class="on">product</router-link>
    3. <router-link to="/cart" active-class="on">cart</router-link>
    4. <router-link to="/my" active-class="on">my</router-link>
    5. <router-link to="/order" active-class="on">order</router-link>

(6) history模式

  1. vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
  2. 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

  3. 以前使用history需要后端支持, 现在不需要了

    1. const router = new VueRouter({
    2. mode: 'history',  // 默认hash
    3. routes: [...]
    4. })

    (7) 默认跳转(redirect重定向)

    当访问 ‘/‘, 我们使用redirect使它默认跳到 ‘/product’

    1. {
    2.  path: '/',
    3.    redirect: '/product'
    4. },

    (8) 404配置

    假如用户访问了一个没有的路由, 我们让它跳转到404页面

    1. {
    2.  path: '*',
    3.    component:()=>import('@/components/NotFound')
    4. }

    (四) vant有赞ui库

    文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/

  4. npm i vant -S 安装vant

  5. 导入所有组件(按需导入请看文档)

    1. // 在main.js添加以下内容
    2. import Vue from 'vue';
    3. import Vant from 'vant';
    4. import 'vant/lib/index.css';
    5. Vue.use(Vant);

    (五) 封装axios

    封装axios让我们请求数据更happy

  6. npm i axios -s

  7. 在src下新建utils文件夹
  8. 新建request.js文件 ```javascript import axios from ‘axios’; import { Dialog } from ‘vant’;

const get = (url, data) => { return new Promise((resolve, reject) => { axios.get(url,{params: data}).then(res=> { if(res.data.code == 666) { resolve(res.data); } else { Dialog({ message: res.data.msg }); } }).catch(err=>{ Dialog({ message:’网络请求失败, 请稍后再试’ }); }); }) }

const post = (url, data) => { return new Promise((resolve, reject) => { axios.post(url, data).then(res=> { if(res.data.code == 666) { resolve(res.data); } else { Dialog({ message: res.data.msg }); } }).catch(err=>{ Dialog({ message:’网络请求失败, 请稍后再试’ }); }); }) }

export default { get, post }

  1. <a name="V8FY9"></a>
  2. ## (六) 集中管理所有请求
  4. 1. 在src下新建api文件夹
  5. 1. 新建index.js
  6. ```javascript
  7. import axios from '@/utils/request'
  8. let baseUrl = 'http://huruqing.cn:3000/api';
  11. // 电影模块
  12. export const fetchFilmList =(data={}) => axios.get(baseUrl+'/film/getList', data);
  13. export const fetchFilmDetail = (data={}) => axios.get(baseUrl+'/film/getDetail', data);
  15. // 影院模块
  16. export const fetchCinemalList =(data={}) => axios.get(baseUrl+'/film/getList', data); 
  18. // 其他模块

(七) vue路由跳转和传参

(1) 路由跳转的两种方式

  1. // 方式一
  2. <router-link to="xxxx"></router-link>
  3. // 方式二
  4. this.$router.push();

(2) 三种路由传参方式

传参

  1. 通过params传参
  2. 动态路由传参
  3. 通过query传参

获取参数

  1. this.$route.params
  2. this.$route.query

注意: router和route不是一回事

1.通过name+params传参

  1. // 1.配置路由的时候添加name
  2. {
  3.   path: '/product',
  4.   name: 'product'
  5.   component: ()=>import('@/views/product/index')
  6. },
  9. // 2.跳转
  10. this.$router.push({ name: 'product', params: { productId: '123' }})
  12. // 3.接收参数
  13. this.$route.params.productId

2.动态路由传参

  1. // 1.路由配置
  2. {
  3.    path: '/detail/:productId,         
  4.    name: 'detail',
  5.    component: Detail
  6.  }
  7. // 2.页面,参数接在路由后面 
  8. <router-link to="/detail/19"></router-link>
  9. // 获取参数
  10. this.$route.params.productId(上面配置是id,这里就用id来接收参数)

3.通过path+query传参

  1. // 带查询参数，query传参会把参数拼接到地址栏,变成 /register?plan=aaa, 使用了path,参数不能通过params传递
  2. this.$router.push({ path: '/register', query: { plan: 'aaa' }})
  3. // 获取参数
  4. this.$route.query.plan;


(八) 导入重置样式和公共样式

  1. // main.js
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import router from './router/index'
  5. import Vant from 'vant';
  6. import 'vant/lib/index.css'; 
  7. // 导入重置样式和公共样式
  8. import '@/assets/style/reset.less'
  9. import '@/assets/style/common.less'
  11. Vue.use(Vant);
  12. Vue.config.productionTip = false
  14. new Vue({
  15.   router,
  16.   render: h => h(App),
  17. }).$mount('#app')

(九) 模拟数据

  1. 文档地址: https://www.npmjs.com/package/json-server
  2. npm i json-server -g //全局安装
  3. 创建db.json

  4. 启动json-server

    1. json-server --watch db.json
    1. // db.json
    2. {
    3. "posts": [
    4.  { "id": 1, "title": "json-server", "author": "typicode" }
    5. ],
    6. "comments": [
    7.  { "id": 1, "body": "some comment", "postId": 1 }
    8. ],
    9. "profile": { "name": "typicode" }
    10. }

  5. 访问接口

    1. http://localhost:3000/posts/1

  6. 将命令添加到package.json, 可以使用 npm run json 启动项目

    1. "scripts": {
    2.  "json": "json-server --watch db.json" 
    3. },

    (十) 父子组件通信

    1.父传子

  • 父组件给子组件绑定属性, 属性的值是需要传递的信息
  • 子组件通过props接收父组件的信息 ```javascript // 父组件

// 子组件

Expected Number with value NaN, got String …. 预期得到的数字, 但是得到是字符串

  1. <a name="wV3Gp"></a>
  2. #### 2. 子传父
  4. 1. 父组件在子组件上绑定一个自定义事件(事件名称我们自己定义的, vue本身是没有这个事件的)
  5. 1. 父组件给自定义事件绑定一个函数, 这个函数可以接受来自子组件的数据
  6. 1. 子组件使用$emit触发(调用)该事件, 并把数据以参数形式传给父组件
  7. ```javascript
  8. // 父组件
  9. <template>
  10.     <div class="father">
  11.         <h3>父组件</h3>
  12.         <hr>
  13.         <!-- @getMsg是自定义事件,它绑定了一个叫getMsg的函数,当事件被触发,函数就会被调用 -->
  14.         <child @getMsg="getMsg"></child> 
  15.     </div>
  16. </template>
  18. <script>
  19. import Child from './Child.vue';
  20. export default {  
  21.     components: {
  22.         Child
  23.     }, 
  25.     methods: {
  26.         // data是子组件传回来的信息
  27.         getMsg(data) {
  28.             console.log(data);
  29.         }
  30.     }
  31. };
  32. </script>
  34. // 子组件
  35. <template>
  36.     <div class="Falterh">
  37.         <h4>子组件</h4>  
  38.         <button @click="send">发信息</button>
  39.     </div>
  40. </template>
  42. <script>
  43. export default {   
  45.     methods: {
  46.         // 给父组件发送信息
  47.         send() {
  48.             /**
  49.              * 使用$emit触发父组件的自定义事件
  50.              * @param getMsg-父组件自定义事件, 
  51.              * @param data-传递给父组件的数据
  52.              */
  53.             let data = {
  54.                 msg1: '父亲大人安好',
  55.                 msg2: '老爸,我没有生活费了'
  56.             }
  57.             this.$emit('getMsg',data);
  58.         }
  59.     }
  61. };
  62. </script>
  64. // 综合例子练习: 定义父组件和子组件, 实现需求: 父=>子:儿子,好好努力; 子=>父:父亲,保重身体
  66. // 父组件
  67. <template>
  68.   <div>
  69.     <h3>父组件</h3>
  70.     <p>来自儿子的信息: {{info}}</p>
  72.     <hr>
  73.     <Son msg="儿子,好好努力" @getMsg="test"></Son>  
  74.   </div>
  75. </template>
  77. <script>
  78. import Son from './Son' 
  79. export default {
  80.   data() {
  81.     return {
  82.       info: ''
  83.     }
  84.   },
  86.   // 注册组件
  87.   components: {
  88.     Son, 
  89.   }, 
  91.   methods: {
  92.     test(data) {
  93.       this.info = data;
  94.     }
  95.   }
  96. };
  97. </script> 
  99. // 子组件
  100. <template>
  101.   <div>
  102.     <h4>子组件</h4>
  103.     <p>来自父亲的信息: {{msg}}</p>
  104.     <br>
  105.     <button @click="send">给父亲发消息</button>
  106.   </div>
  107. </template>
  110. <script>
  111. export default { 
  112.     props: ['msg'],
  114.     methods: {
  115.         send() {
  116.             // 触发父组件绑定在子组件上的自定义事件
  117.             let str = '父亲,保重身体';
  118.             this.$emit('getMsg',str);    
  119.         }
  120.     }
  121. };
  122. </script>

// 有赞的导航栏

  2. // 父组件
  3. <Nav-Bar
  4.   title="标题"
  5.   left-text="返回"
  6.   right-text="按钮" 
  7.   @click-left="onClickLeft"
  8.   @click-right="onClickRight"
  9. />
  11. // 子组件    
  12. <template>
  13.   <div class="nav-bar">
  14.     <span class="blue" @click="click1">{{ leftText }}</span>
  15.     <span>{{ title }}</span>
  16.     <span class="blue" @click="click2">{{ rightText }}</span>
  17.   </div>
  18. </template>
  20. <script>
  21. export default {
  22.   props: ["left-text", "title", "right-text"],
  23.   methods: {
  24.     // 点击左边
  25.     click1() {
  26.       this.$emit("click-left");
  27.     },
  28.     // 点击右边
  29.     click2() {
  30.       this.$emit("click-right");
  31.     },
  32.   },
  33. };
  34. </script>
  36. <style>
  37. body{background: #ebebeb;margin: 0;}
  38. .blue{color: #1989fa;}
  39. .nav-bar {
  40.   background: #fff;
  41.   padding:0 10px;
  42.   display: flex;
  43.   justify-content: space-between;
  44.   align-items: center;
  45.   height: 50px;
  46. }
  47. </style>


(十一) slot插槽

元素作为承载分发内容的出口
一个内存插槽, 当内存插上之后,插槽就可以接收来自内存的信息, slot取名插槽含义也贴切, 在子组件配置插槽slot, 当父组件”插”信息进来的时候, 插槽slot就能接收到这个信息. slot插槽大大的扩展子组件的功能。
第3节 移动端项目实战 - 图4
image.png

1. vant有赞ui库中slot的例子

  1. <van-nav-bar title="标题" left-text="返回" left-arrow> 
  2.    <p slot="right">
  3.      <van-icon name="search" size="18" />
  4.    </p>
  5. </van-nav-bar>

2. 普通插槽

  1. // 子组件Child.vue代码
  2. <template>
  3.   <div style="margin-top: 30px;background: gray;height: 200px;">
  4.     <h5>这是子组件</h5>
  5.     <slot></slot>
  6.   </div>
  7. </template>
  9. // 父组件father.vue代码
  10. <template>
  11.   <div>
  12.     <h3>这是父组件</h3>
  14.     <Child>
  15.         <button>提交</button>
  16.     </Child>
  17.   </div>
  18. </template>
  20. <script>
  21. import Child from '@/components/Child'
  22. export default {
  23.     components: {
  24.         Child
  25.     }
  26. };
  27. </script>

3. 具名插槽

  1. // father.vue代码
  2. <template>
  3.   <div>
  4.     <h3>这是父组件</h3>
  6.     <Child>
  7.       <header slot="header" style="background: yellow">这是头部</header>
  8.       <footer slot="footer" style="background: green;">这是底部</footer>
  10.       <div style="border:1px solid;">
  11.         <button>a</button>
  12.         <button>b</button>
  13.         <button>c</button>
  14.         <button>d</button>
  15.       </div>
  16.     </Child>
  17.   </div>
  18. </template>
  20. <script>
  21. import Child from "@/components/Child";
  22. export default {
  23.   components: {
  24.     Child
  25.   }
  26. };
  27. </script>
  29. 接收父组件带 slot="footer" 的内容
  30. 接收不带slot="xxx" 的内容
  32. // Child.vue代码
  33. <template>
  34.   <div style="margin-top: 30px;background: gray;height: 200px;">
  35.     <h5>这是子组件</h5>
  36.         <!--接收父组件带 slot="header" 的内容-->
  37.     <slot name="header"></slot>
  38.         <!--接收父组件带 slot="footer" 的内容-->
  39.     <slot name="footer"></slot>
  40.         <!--接收剩余内容-->
  41.     <slot></slot>
  42.   </div>
  43. </template>

(十二) 混入mixin

mixin 其实是一个对象，里面的结构大致跟普通组件的 script 里面的一样，有 data 属性，钩子函数和方法等 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

1.组件内混入

  1. // mixin.js
  2. export default {
  3.     data: function() {
  4.       return {
  5.         username: "huruqing",
  6.         age: 100
  7.       };
  8.     },
  10.     created() {
  11.         console.log('这是混入对象')
  12.     },
  14.     methods: {
  15.         say() {
  16.             console.log('hahahhahahha');
  17.         }
  18.     }
  19.   };
  22. // demo.vue
  23. <template>
  24.   <div>
  25.     <p>{{username}}</p>
  26.     <p>{{msg}}</p>
  27.     <p>{{age}}</p>
  28.   </div>
  29. </template>
  31. <script>
  32. import mixin from './mixin'
  33. export default {
  34.   mixins:[mixin],
  35.   data() {
  36.     return {
  37.       username: '张三',
  38.       msg: 'hahahahahahha'
  39.     }
  40.   },
  42.   created() {
  43.     console.log('组件的created');
  44.     this.say();
  45.   }
  46. }
  47. </script>

2.全局混入

  1. // mixin.js
  2. export default {
  3.     methods: {
  4.         showLoading() {
  5.             this.$toast.loading({
  6.                 message: '加载中...',
  7.                 forbidClick: true,
  8.                 duration:0
  9.               });
  10.         },
  11.         closeLoading() {
  12.             this.$toast.clear();
  13.         }
  14.     }
  15. }
  17. // main.js,这个代码放在Vue.use(Vant)之后
  18. import mixin from './mixin/index';
  19. Vue.mixin(mixin);
  21. // 其他组件就可以直接使用下面代码来显示loading
  22. this.showLoading();

(十三) 跨组件通信vuex

相关资料

vuex 官网文档地址: https://vuex.vuejs.org/zh/
修改年龄接口: /changeAge.json?newAge=xxx

(1) vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。学习vuex掌握以下几点就差不多了.

  1. 普通对象: 创建对象, 定义对象属性, 读取属性, 修改属性
  2. vuex: 创建仓库, 定义状态, 读取状态, 修改状态(核心关键点)
  3. 响应式
  4. vuex的5个核心概念
    1. state 状态
    2. getters 获取
    3. mutations 修改状态
    4. actions 修改状态
    5. modules 模块

(2) 在项目中使用配置 vuex

  1. 创建仓库 ```javascript
  2. 安装vuex: npm i vuex -S
  3. /sotre/index.js 代码如下:

import Vuex from ‘vuex’; import Vue from ‘vue’; Vue.use(Vuex);

export default new Vuex.Store({ }); 

  2. 2. 挂载到根节点
  3. ```javascript
  4. import Vue from 'vue'
  5. import App from './App.vue'
  6. import router from './router/index'
  7. import store from './store/index'
  9. Vue.config.productionTip = false
  11. new Vue({
  12.   router,
  13.   store,
  14.   render: h => h(App),
  15. }).$mount('#app')

(3) 在项目中使用 vuex 进行跨组件通信

  1. 定义状态 ```javascript import Vuex from ‘vuex’; import Vue from ‘vue’; Vue.use(Vuex);

export default new Vuex.Store({ // 定义状态 state: { name: ‘王美丽’, age: 20 } });

  2. 2. **读取状态**
  3.    - 使用mapState辅助函数来读取
  4. ```javascript
  5. //写法1 
  6. computed: mapState(['name','age','date'])
  7. // 写法2
  8. computed: {
  9.   ...mapState(['name','age','date'])
  10. }
  • 直接读取
    1. // this.$store.state.xxx;
    2. <template>
    3. <div class="page"> 
    4. <p>新娘姓名: {{$store.state.name}}</p>
    5. <p>新娘年龄: {{$store.state.age}}</p>
    6. </div>
    7. </template>
  1. 修改状态 mutation
    1. 定义mutation ```javascript // 定义mutation import Vuex from ‘vuex’; import Vue from ‘vue’; Vue.use(Vuex);

export default new Vuex.Store({ // 定义状态 state: { name: ‘王美丽’, age: 20, date: ‘2021-10-01’ }, // 定义mutation,用来修改状态 mutations: { /**

  1.      * 定义一个用来修改日期的mutation
  2.      * @param {*} state 状态
  3.      * @param {*} payload 传入来的数据
  4.      */ 
  5.     updateDate(state,newDate) {
  6.         state.date = newDate;
  7.     }
  8. }

});

  2.    1. 提交mutation 
  3. ```javascript
  4. // this.$store.commit('updateDate', this.newDate);
  6. <template>
  7.   <div class="page">
  8.     <header>张三组件</header>
  9.     <p>
  10.       <input type="text" v-model="newDate">
  11.       <button @click="changeDate">修改结婚日期</button>
  12.     </p>
  13.   </div>
  14. </template>
  15. <script>
  16. export default {
  17.   data() {
  18.     return {
  19.       newDate: ''
  20.     }
  21.   }, 
  22.   methods: {
  23.       changeDate() {
  24.         // 提交mutation
  25.         this.$store.commit('updateDate',this.newDate);
  26.       }
  27.   }
  28. }
  29. </script>

注意:

  • 修改状态必须通过mutation
  • mutation必须是同步函数

(4) 异步改状态 action

  1. 定义mutation
  2. 定义action, 在action提交mutation

  3. 派发action

    1. this.$store.dispatch('updateAgeAction', this.newAge);

    使用action修改状态流程:
    用户修改数据 => 派发action => action提交mutation => 修改状态 => 用户界面更新
    image.png

    (5) 派生(扩展)状态 getters

  4. 定义getter (getter有的像计算属性computed)

    1. // store/index.js 
    2. getters: {
    3.      // 根据身份证扩展出一个新的状态:生日
    4.      birthday(state) {
    5.          return state.cardId.replace(/\d{6}(\d{4})(\d{2})(\d{2}).*/,'$1年$2月$3日'); 
    6.      } 
    7.  },

  5. 获取getter的值(用法跟state类似)

    • 直接获取 this.$store.getters.xxx
    • 通过mapState进行获取 ```javascript // 直接获取

// 使用mapGetter是获取

  2. ps: getter非必须, 我们完全可以通过computed来定义一个新的属性(依赖仓库的state), 但如果很多个组件都要用到这个属性, 放在computed里来定义就显得冗余了, 最好定义一个getter来扩展新的状态(属性)
  4. <a name="594b0307"></a>
  5. ### (6) 模块化 modules
  7. 1. 导出模块, 模块的代码如下:
  8. ```javascript
  9. // cart模块 /store/modules/cart.js
  10. export default {
  11.     state: {
  12.       cartNum: 0
  13.   },
  14.     getters: {},
  15.     mutations: {},
  16.     actions: {}
  17. }

  1. 在仓库中加入modules

    1. // /store/index.js
    2. import cart from './modules/cart'
    3. export default new Vuex.Store({
    4.  state: {},
    5.  getters: {},
    6.  mutations: {},
    7.  actions: {},
    8.  modules: {
    9.      cart
    10.  }
    11. })

  2. 获取模块中的状态

    1. this.$store.state.cart.cartNum;

    (7) vuex持久化

  3. npm install vuex-persistedstate —save

  4. 在 /store/index.js中导入并挂载 ```javascript import createPersistedState from “vuex-persistedstate”

conststore =new Vuex.Store({ plugins: [createPersistedState()] }

  1. <a name="MaRQ5"></a>
  2. #### (8) html5本地存储
  4. 1. localStorage
  5. ```javascript
  6. (1) 存数据 localStorage.setItem('name','王美丽');
  7. (2) 取数据 localStorage.getItem('name');
  8. (3) 清除数据 localStorage.clear();
  1. sessionStorage
    1. (1) 存数据 sessionStorage.setItem('name','王美丽');
    2. (2) 取数据 sessionStorage.getItem('name');
    3. (3) 清除数据 sessionStorage.clear();

  2. localStorage和sessionStorage的区别

    1. localStorage永久存储, 如果不清理一直存在
    2. sessionStorage临时存储, 浏览器关闭就销毁

      (十四) 过滤器filter

      (十五) token和session

      (1) session

  3. 为什么要有 session 的出现？

答：是由于网络中 http 协议造成的，因为 http 本身是无状态协议，这样，无法确定你的本次请求和上次请求是不是你发送的。如果要进行类似论坛登陆相关的操作，就实现不了了。

  1. session 生成方式？

答：浏览器第一次访问服务器，服务器会创建一个 session，然后同时为该 session 生成一个唯一的会话的 key,也就是 sessionid，然后，将 sessionid 及对应的 session 分别作为 key 和 value 保存到缓存中，也可以持久化到数据库中，然后服务器再把 sessionid，以 cookie 的形式发送给客户端。这样浏览器下次再访问时，会直接带着 cookie 中的 sessionid。然后服务器根据 sessionid 找到对应的 session 进行匹配； 还有一种是浏览器禁用了 cookie 或不支持 cookie，这种可以通过 URL 重写的方式发到服务器；

  1. 简单来讲，用户访问的时候说他自己是张三，他骗你怎么办？ 那就在服务器端保存张三的信息，给他一个 id，让他下次用 id 访问。

    (2) token

  2. 为什么会有 token 的出现？

  3. 答：首先，session 的存储是需要空间的，其次，session 的传递一般都是通过 cookie 来传递的，或者 url 重写的方式；而 token 在服务器是可以不需要存储用户的信息的，而 token 的传递方式也不限于 cookie 传递，当然，token 也是可以保存起来的；
  4. token 的生成方式？

  5. 答：浏览器第一次访问服务器，根据传过来的唯一标识 userId，服务端会通过一些算法，如常用的 HMAC-SHA256 算法，然后加一个密钥，生成一个 token，然后通过 BASE64 编码一下之后将这个 token 发送给客户端；客户端将 token 保存起来，下次请求时，带着 token，服务器收到请求后，然后会用相同的算法和密钥去验证 token，如果通过，执行业务操作，不通过，返回不通过信息；

    (3) token 和 session 的区别？

  6. token 和 session 其实都是为了身份验证，session 一般翻译为会话，而 token 更多的时候是翻译为令牌； session 服务器会保存一份，可能保存到缓存，文件，数据库；同样，session 和 token 都是有过期时间一说，都需要去管理过期时间； 其实 token 与 session 的问题是一种时间与空间的博弈问题，session 是空间换时间，而 token 是时间换空间。两者的选择要看具体情况而定。

  7. 方案 A ：我发给你一张身份证，但只是一张写着身份证号码的纸片。你每次来办事，我去后台查一下你的 id 是不是有效。
  8. 方案 B ：我发给你一张加密的身份证，以后你只要出示这张卡片，我就知道你一定是自己人。 就这么个差别。

    (4) axios请求每次都带上token

    1. axios.get(url,{headers:{'user-token':token}, params: data})