👻前端Vue经典面试题汇总

   - `效果展示`<br />![](https://cdn.nlark.com/yuque/0/2021/png/22000767/1625228599099-405519c0-1b25-4c37-b0dc-837aad87db06.png#align=left&display=inline&height=524&margin=%5Bobject%20Object%5D&originHeight=524&originWidth=1113&size=0&status=done&style=none&width=1113)
- **7-3 传递参数的方式**
   - **通过标签中的to传参**
      - 核心定义
         - 核心就是采用`router-link`组件中的to属性,分别设置对应的name和params
         - 上面的to前边的是带冒号的,后边跟的一个对象形式的字符串
            - name: 在路由配置文件中起的name值,叫做命名路由
            - params: 要传递的参数,对象的形式,可以在对象中传递多个值
      - 具体实现
         - 1- 在\src\App.vue组件里面导航中添加以下代码
```vue
<template>
  <div id="app">
    <router-link to="/home">首页</router-link><br>
      // 1- to属性是加上冒号的,设置对象,并且使用params来组建要传递的参数
    <router-link :to="{name:'about',params:{userName:'test1234'}}">关于</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>

     - 2- 在\src\router\index.js 路由配置文件中添加name字段

{
    path: '/about',
    // 2- 在路由配置对象中,添加上name属性,要和to中写入的name保持一致
    name:'about',
    component: About
  }

     - 3- 在src/components/About.vue 中接收参数

<template>
  <div>
      // 3- 使用$route呈现传递的参数
    <h2>{{$route.params.userName}}</h2>
    <p></p>
  </div>
</template>

<script>
export default {
  name: 'about'

}
</script>

     - 4- 效果展示<br />![](https://cdn.nlark.com/yuque/0/2021/png/22000767/1625228599048-e15e4a6a-76b4-4b45-824c-8d763e556487.png#align=left&display=inline&height=436&margin=%5Bobject%20Object%5D&originHeight=436&originWidth=1115&size=0&status=done&style=none&width=1115)

• url中传递参数

  • 核心定义
    • 在需要接收的组件中使用$route.params来获取传递进来的数据,传递回来的是一个对象,可以通过点语法,实现对值的获取

  • 具体实现

    • 1- 在路由中以冒号进行传递,在src/router/index.js中添加

      {
      // 可以直接设置规则,约定传递的参数特定格式
      path: '/about:id(\\d+)/:name',
      component: About
      }
      

    • 2- 接受参数,src\views\about.vue

      <template>
      <div>
      // 
      <h2>{{$route.params.id}}</h2>
      <h2>{{$route.params.name}}</h2>
      <p></p>
      </div>
      </template>
      <script>
      export default {
      name: 'about'
      }
      </script>
      

    • 3- 路由跳转,在\src\App.vue中添加

      <template>
      <div id="app">
      <router-link to="/home">首页</router-link><br>
      // 2- 设置to属性中的参数
      <router-link to="about/1/张三和李四">关于</router-link>
      <router-view></router-view>
      </div>
      </template>
      <script>
      export default {
      name: 'App',
      }
      </script>
      <style>
      </style>
      

    • 4- 效果展示
      

• 编程式导航-params传递参数

  • 核心定义
    • 设置路由配置对象中的信息,添加name字段,然后在接收参数的组件中,使用$.route.params来进行接收,在要传递参数的组件中,通过创建一个方法,在方法内部使用$.router.push方式组装一个传递参数的对象,这个对象中有两个字段,分别是{name: xxx}目标组件的名称,以及params: {id: xxx ,name: 'xxx'},两者都是放在$router.push()方法中,进行的组装
    • 注意事项:
      • 动态路由使用params传递参数,在this.$router.push()方法中path不能和params一起使用,否则params将无效,需要name来指定页面
      • 以下方式参数不会显示在浏览器的URL地址栏中,如果刷新了一次,就获取不到参数了,改进方式将path: about/:id/:name按照这种形式改进

  • 具体实现

    • 1- 在src/router/index.js中添加以下代码

      {
      // 这种方式,刷新页面后,会丢失参数
      path: '/about',
      // 改进为:
      path: '/about/:id/:name'
      // 添加上name字段
      name:'about',
      component: About
      }
      

    • 2- 在src/component/about.vue中,设置接收的参数名称 ```vue

      
               - 3- 在src\App.vue组件中,添加一个事件,通过`$router.push`的方式,传递参数
      ```vue
      <template>
        <div id="app">
          <router-link to="/home">首页</router-link><br>
          <router-link to="/about">关于</router-link>
          <router-view></router-view>
            // 3- 添加一个事件,触发methods中的一个方法
          <button @click="toAboutPage">点击我,向About组件传递参数</button>
        </div>
      </template>
      <script>
      export default {
        name: 'App',
        methods: {
            // 4- 实现传参的方法,核心就是通过$router.push方法,组装一个对象,把值进行传递
          toAboutPage () {
            this.$router.push({ name: 'about', params: { id: 1, name: "jack" } })
          }
        }
      }
      </script>
      <style>
      </style>
      

           - 实现效果<br />![](https://cdn.nlark.com/yuque/0/2021/png/22000767/1625228598891-84090416-f8bc-448b-8ad7-76b39f6ba6cc.png#align=left&display=inline&height=506&margin=%5Bobject%20Object%5D&originHeight=506&originWidth=1104&size=0&status=done&style=none&width=1104)
      

      • 编程式导航-query传递参数

        • 核心定义
          • 和使用params的方式相同,只不过在parmas替换成query即可,两者最大不同的地方在于,使用query方式传递的参数,会直接暴露在URL地址栏上,而使用params方式传递的参数则不会

        • 实现方式

          • 1- 在src\router\index.js中写入需要传参的组件名称

            {
            // 1- 在这里添加上需要传参组件的名称
            path: '/about',
            name:'about',
            component: About
            }
            

          • 2- 在src\views\about.vue中,改为query的方式 ```vue

            
                     - 3- 在发送参数的组件内,创建一个方法,使用$router.push()组装一个传递的query对象
            ```vue
            <template>
              <div id="app">
                <router-link to="/home">首页</router-link><br>
                <router-link to="/about">关于</router-link>
                <router-view></router-view>
                <button @click="toAboutPage">点击我,向About组件传递参数</button>
              </div>
            </template>
            <script>
            export default {
              name: 'App',
              methods: {
                toAboutPage () {
                    // 3- 核心是这里,把之前的params该写为query的方式
                  this.$router.push({ name: 'about', query: { id: 1, name: "jack" } })
                }
              }
            }
            </script>
            

                 - 4- 效果展示<br />![](https://cdn.nlark.com/yuque/0/2021/png/22000767/1625228599123-540f82b3-5f4d-4501-8e10-ab60fc5e7319.png#align=left&display=inline&height=495&margin=%5Bobject%20Object%5D&originHeight=495&originWidth=1111&size=0&status=done&style=none&width=1111)
            

            • 7-4 Vue-Router中存在哪些钩子函数
              • 全局钩子函数
                • 具体实现 ```javascript // 定义- 全局导航钩子函数- 进入页面时,实现拦截登录 router.beforeEach((to,from,next)=>{ // 此处可以加入登录逻辑判断 // 放行 next() })

            // 定义- 全局后置钩子函数-常用于结束动画后的操作 router.afterEach(()=>{ // 不接受next() })

            
                  - 常用参数
                     - to:Router 即将要进入的目标[路由对象]
                     - from: Router 当前守卫要离开的路由
                     - next: Function 继续执行函数
                        - next() 继续执行
                        - next(false) 中断当前执行
                        - next('/')或者next({path: '/'}) 跳转新的页面,常用于登陆失效后跳转登陆
               - **路由单独钩子函数**
                  - 基本使用
            ```javascript
            {
                path:'home',
                component: Home,
                 // 路由内钩子
                 beforeEnter: (to,from,next=>{
                     console.log('进入前执行')
                     next()
                 })
            }
            

            • 组件内钩子函数
              • 基本使用
                • beforeRouterEnter: 进入页面时调用
                • beforeRouterUpdate: 页面路由改变时调用,一般需要携带参数
                • beroreRouterLeave: 离开页面时调用
              • 实现方式

                <script>
                export default {
                name: 'Two',
                data () {
                return {
                    msg: 'Hi, I am Two Page!'
                }
                },
                // 进入页面前调用
                beforeRouteEnter(to, from, next) {
                console.log('进入enter路由钩子')
                next()
                },
                // 离开页面调用
                beforeRouteLeave(to,from, next){
                console.log('进入leave路由钩子')
                next()
                },
                // 页面路由改变时调用
                beforeRouteUpdate(to, from, next) {
                console.log('进入update路由钩子')
                console.log(to.params.id)
                next()
                }
                }
                </script>
                

            • 7-5 嵌套路由的实现

              • 基本定义
                • 子路由,也叫嵌套路由,采用在children后跟路由数组实现,数组中和其它配置路由信息基本相同,需要配置path和component,然后在对应的位置添加上<router-view></router-view>来展示子页面信息,相当于嵌套ifname

              • 具体实现

                • 1- src\components\Home.vue(父组件)

                  <template>
                  <div>
                  <h1>{{msg}}</h1>
                  <!-- 添加子路由导航 -->
                  <router-link to="/home">首页</router-link>
                  <br>
                  <hr>
                  <router-link to="/home/ComOne">ComOne组件-展示区域</router-link>
                  <br>
                  <hr>
                  <router-link to="/home/ComTwo">ComTwo组件-展示区域</router-link>
                  <!-- 展示子组件 -->
                  <router-view></router-view>
                  </div>
                  </template>
                  <script>
                  export default {
                  name: 'Home',
                  data () {
                  return {
                  msg: 'Hello Home'
                  }
                  }
                  }
                  </script>
                  

                • 2- src\components\ComOne.vue

                  <template>
                  <div>
                  <h2>{{msg}}</h2>
                  </div>
                  </template>
                  <script>
                  export default {
                  name:'ComOne',
                  data(){
                  return {
                  msg:'Hello ComOne'
                  }
                  }
                  }
                  </script>
                  

                • 3- src\components\ComTwo.vue

                  <template>
                  <div>
                  <h2>{{msg}}</h2>
                  </div>
                  </template>
                  <script>
                  export default {
                  name:'ComTwo',
                  data(){
                  return {
                  msg:"Hello ComTwo"
                  }
                  }
                  }
                  </script>
                  

                • 4- src\router\index.js ```javascript import Vue from ‘vue’ import VueRouter from ‘vue-router’ // 配置路由的映射关系 import Home from ‘@/components/Home.vue’ import ComOne from ‘@/components/ComOne.vue’ import ComTwo from ‘@/components/ComTwo.vue’

            // 1- 注入插件 Vue.use(VueRouter)

            // 2- 定义路由 const routes = [ // 默认展示组件home { path: ‘/‘, redirect: ‘/home’ }, { path: ‘/home’, // 父级路由 component: Home, children: [ // 定义嵌套路由的关键属性children { path: ‘ComOne’, // 子路由1 component: ComOne }, { path: ‘ComTwo’, // 子路由2 component: ComTwo } ] } ] // 3- 创建Router实例 const router = new VueRouter({ routes }) // 4- 导出实例 export default router

            
               - 效果展示<br />    ![](https://cdn.nlark.com/yuque/0/2021/png/22000767/1625228599082-7e002b9b-c211-46bb-9307-d35f0997f7c2.png#align=left&display=inline&height=543&margin=%5Bobject%20Object%5D&originHeight=543&originWidth=864&size=0&status=done&style=none&width=864)
            - **7-6  `$route`和`$router`的区别**
               - **$route**
                  - 基本定义
                     - $route是路由参数对象,包括了path,params,hash,query,fullPath,matched,name等路由信息参数<br />![](https://cdn.nlark.com/yuque/0/2021/png/22000767/1625228599004-c0da78f8-30a6-4540-b282-593e1349b1ba.png#align=left&display=inline&height=149&margin=%5Bobject%20Object%5D&originHeight=149&originWidth=815&size=0&status=done&style=none&width=815)
                  - 常用参数
                     - `$route.path`
                        - 字符串形式,对应当前路由的路径,总是解析为绝对路径,如"/ComOne"
                     - `$route.params`
                        - 一个key/value对象,包含了动态片段和全匹配片段,如果没有路由参数,那么是一个空对象形式
                     - `$route.query`
                        - 一个key/value对象,表示URL查询参数,例如,对于路径/home?user=1,则有$router.user为1,如果没有查询参数,是一个空对象形式
                     - `$route.fullPath`
                        - 完整解析后的URL,包含查询的参数和hash的完整路径信息
                     - `$router.matched`
                        - 数组形式,包含当前的路径中所包含的所有片段和对应的配置参数对象
                     - `$route.name`
                        - 当前路径的名字
               - **$router**
                  - 基本定义
                     - $router是路由实例对象,即VueRouter创建的实例,包括了路由的跳转方法,钩子函数等<br />![](https://cdn.nlark.com/yuque/0/2021/png/22000767/1625228599161-4b49a146-a391-4c0c-9bb9-b433b1662c86.png#align=left&display=inline&height=222&margin=%5Bobject%20Object%5D&originHeight=222&originWidth=926&size=0&status=done&style=none&width=926)
                  - 常用方法
                     - `go()`
                        - 跳转到上次浏览的页面
            ```javascript
             showRouter: function () {
                // 1- 跳转到上次浏览的页面
            this.$router.go(-1)
             }
            

                 - `replace()`
                    - 跳转到指定地址
            

            showRouter: function(){
                // 2- 跳转到指定地址
                 this.$router.replace('/ComTwo')
            }
            

                    - 跳转到指定名字地址
            

            showRouter: function () {
                  // 3-指定跳转路由的名字下
                 this.$router.replace({name:'ComTwo'})
            }
            
            // router/index.js 
            // 需要在router配置文件中,设置对象name字段,才可以实现跳转
             {
                    path: 'ComTwo', 
                    // 添加上name属性
                    name:'ComTwo',
                    component: ComTwo
             }
            

                 - `push()`
                    - 跳转到指定位置
            

             showRouter: function(){
                // 4- 通过push跳转
                this.$router.push('/ComTwo')
              }
            

                    - 跳转到指定名字地址
            

             showRouter: function () {
                // 4- 通过push跳转
                this.$router.push({name:"'/ComTwo'"})
             }
            // router/index.js
            // 需要在router配置文件中,设置对象的name字段,才可以实现跳转
            {
                    path: 'ComTwo',
                    // 添加上name属性
                    name:'ComTwo',
                    component: ComTwo
            }
            

                 - `$router.push和$router.repleace`的区别
                    - 使用`push`方法的跳转会向`history`栈添加一个新的记录,当点击浏览器的back返回按钮时,可以看到之前的页面
                    - 使用`replace`方法不会向`history`添加新记录,而是替换掉当前的`history`记录,也就是`replace`跳转到页面后,back按钮不能查看到之前的页面
            

            • 7-7 路由懒加载

              • 核心定义
                • Vue是单页面应用,如果没有应用懒加载技术,那么通过webpack打包后的文件将会异常的庞大,造成用户进入页面的时候,一次加载的内容过多,时间过长,那么就会造成白屏出现,及时做了loading也是不利于用户体验,使用了懒加载则可以把页面进行划分,在需要的时候加载,可以有效的分担首页所承担的加载压力,减少首页加载用时

              • 具体实现

                • Vue异步组件

                  compoent: (resolve)=> require(['@/component/One'],resolve)
                  

                • ES6-import(常用的方式)

                  component: ()=>import('@/components/Two')
                  

                • webpack提供的require.ensure()

                  component: r=> require.ensure([], ()=> rrequire('@/component/Three')), 'group-home')
                  

            8、Vuex系列

            • 8-1 单向数据流
              • 核心定义
              • Vuex是一个专门为Vue提供的状态管理模式,它采用的是集中式存储管理应用的所有组件的状态,并以相应的规则保证状态,按照以一种可预测的方式发生变化
              • 单向数据流

            

            • 示图说明
              • State: 驱动应用的数据源(单向数据流)
              • View: 以声明方式将State映射到视图(静态显示出来的数据源)
              • Actions: 处理用户在view上面操作而导致的状态变化(数据源追踪)
            • 示例代码

              <template>
              <div>
                 <!-- view -->
                 <div>{{ count }}</div>
                 <button @click="increment">increment</button>
              </div>
              </template>
              <script>
              export default {
              // state
              data () {
                 return {
                     count: 0
                 }
              },
              // actions
              methods: {
                 increment () {
                     this.count++
                 }
              }
              }
              </script>
              

            • 8-2 Vuex实现流程
              • 核心定义
                
              • 示图说明
                • 1- Vue Component: Vue组件,HTML页面上,负责接收用户操作等行为,执行dispatch方法触发对应的action进行回应
                • 2- Dispatch: 操作行为触发方法,是唯一执行action的方法
                • 3- Actions: 操作行为处理模块,负责处理components接收到的所有交互行为,包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发,向后台API请求的操作就在这个模块中进行,包括触发其它aciton以及提交的mutaion操作,同时该模块提供了对Promise的封装,以支持action的链式触发
                • 4- Commit: 状态改变提交操作方法,对mutation进行提交,是唯一能执行mutation的方法
                • 5- Mutations: 状态改边的操作方法,是Vuex修改state的唯一推荐方法,其它修改方式在严格模式下会报错,该方法只能进行同步操作,并且是全局唯一,操作之中会有hook暴露出来,以进行state的监控等
                • 6- State: 页面状态管理容器对象,几种存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理,页面显示所需的数据从该对象中进行获取,利用Vue的细粒度数据响应机制进行高效的状态更新
                • 7- Getters: state对象读取方法,图中没有单独列出该模块,应该被包含在了render中,Vue Components通过该方法读取全局state对象
              • 总结描述
                • Vue组件的接收行为,用dispatch方法触发action相关处理,若页面状态需要改变,则调用commit方法提交mutation修改state,通过getters获取到state新值,重新渲Vue Components,界面随之更新
              • 具体实现
                • src/vuex/store.js ```javascript // 引入vue import Vue from ‘vue’ // 引入vuex import Vuex from ‘vuex’

            // 使用Vuex Vue.use(Vuex)

            // 1- state 创建初始化状态 const state = { // 放置初始状态 count: 1 }

            // 2- mutations 创建改变状态的方法 const mutations = { // 状态函数,一般大写 ADD (state, n) { state.count += n } }

            // 3- getters 提供外部获取state const getters = { count: function (state) { return state.count } }

            // 4- actions 创建驱动方法改变mutations const actions = { // 触发mutations中相应的方法,一般小写 add ({ commit }, data) { commit(‘ADD’, data) } }

            // 5- 全部注入到store中 const store = new Vuex.Store({ state, mutations, getters, actions })

            // 6- 导出store export default store

            
                  - src/main.js
            ```javascript
            import Vue from 'vue'
            import App from './App.vue'
            import router from './router'
            // 引入store
            import store from './vuex/index'
            
            Vue.config.productionTip = false
            
            new Vue({
              router,
              store, // 注入到全局
              render: h => h(App),
            }).$mount('#app')
            

              - src/component/Count.vue
            

            <template>
              <div>
                <h1>{{msg}}</h1>
                <h2>{{count}}</h2>
                <button @click="clickAdd">新增</button>
              </div>
            </template>
            <script>
            export default {
              name: 'Count',
              data () {
                return {
                  msg:'Hello Vuex'
                }
              },
              computed:{
                // 1- 获取state的值
                count(){
                  return this.$store.state.count
                }
              },
              methods:{
                clickAdd(){
                  // 2- 分发action中的add方法
                  this.$store.dispatch('add',1)
                }
              }
            }
            </script>
            

              - **效果展示**<br />
            

            • 8-3 介绍一下Vuex中的核心属性

              • State(唯一数据源,所有数据都要放到state中存储)

                • 全局中的唯一容器,用于存储components中data对象的零散数据,今天统一的状态管理,页面中显示的数据从该对象中进行获取

                • 1- 定义state

                  export default new Vuex.Store({
                  state:{
                  count:0
                  }
                  })
                  

                • 2- 组件访问state中数据的第一种方式($store.state的方式) ```javascript

                
                 - 3- 组件访问state中数据的第二种方式(mapState的方式)
                ```javascript
                 <template>
                 <div>
                   <h1>当前最新的count的值为:{{count}}</h1>
                   <button>+1</button>
                 </div>
                 </template>
                
                 <script>
                  // 1- 按需导入mapSate
                 import {mapState} from 'vuex'
                 export default {
                   name:"Addition",
                   data(){
                     return{}
                   },
                   computed:{
                     // 2-  将全局函数,映射为当前组件的计算属性
                     ...mapState(['count'])
                   }
                 }
                 </script>
                

            • Mutation(用于变更state中的数据)

              • 只能通过mutation变更store中的数据,不可以直接操作state中的数据,并且可以集中管理store中的数据

              • Mutation本质上也是一个函数,只能通过Mutation修改state中的数据,并且保证必须是同步的操作,否则将无法追踪

                • 1- 定义Mutations

                  export default new Vuex.Store({
                  state: {
                  count: 0
                  },
                  mutations: {
                  // 两个参数: 参数1是当前的state 参数2是要传递进来的值
                  addN (state, step) {
                  // 变更state的状态
                  state.count += step
                  },
                  sub(state){
                     state.count--
                  }
                  },
                  })
                  

                • 2- 触发mutations的第一种方式(commit()传递参数)

                  <template>
                  <div>
                  <h1>当前最新的count的值为:{{count}}</h1>
                  <button @click="addCount">+1</button>
                  </div>
                  </template>
                  <script>
                  export default {
                  name:"Addition",
                  data(){
                  return{
                  }
                  }
                  methods:{
                  addCount(){
                  // 两个参数, 参数1是 mutation创建的方法名称,参数2是addN方法的第二个形参
                  // commit的作用就是为了触发一个mutation
                  return this.$store.commit('addN',1)
                  }
                  }
                  }
                  </script>
                  

                • 3- 触发mutions的第二种方式(mapMutations函数) ```javascript

              ```

              • Action(用于处理异步任务-本质上是一个函数)
                • 如果需要操作异步任务,只能通过Action,不能使用Mutation,但是在Action中触发Mutation的方式间接变更数据
                • 为了执行异步操作,VueX在组件和Mutation之间增加了Action这个中间媒介
                • Action中通过异步的方式获取数据,并且把数据转交给MutIon,最终由Mutation负责变更State中的数据
                • 1- 定义Action ```javascript // 引入vue import Vue from ‘vue’ // 引入vuex import Vuex from ‘vuex’

            // 使用Vuex Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { // 两个参数: 参数1是当前的state 参数2是要传递进来的值 addN (state, step) { // 变更state的状态 state.count += step }, sub (state) { state.count— } }, actions: { // 使用actions来处理所有的异步操作 addAsync(context){ setTimeout(()=>{ // 在Action中不能直接修改state中的数据,要想修改,只能触发一个mutation才可以 context.commit(‘addN’,3) },1000) }, subAsync(context){ setTimeout(()=>{ // 在Action中不能直接修改state中的数据,要想修改,只能触发一个mutation才可以 context.commit(‘sub’,) },1000) } } })

            
                  - 2- 触发action的第一种方式(dispatch)
            ```vue
            <template>
            <div>
              <h1>当前最新的count的值为:{{count}}</h1>
              <button @click="AddHandle">+1--Async</button>
            </div>
            </template>
            <script>
            export default {
              name:"Addition",
              data(){
                return{
                }
              }
              methods:{
                AddHandle(){
                  // 触发Action的第一种方式
                  this.$store.dispatch('addAsync')
                }
              }
            }
            </script>
            

              - 3- 触发action的第二种方式(导入napActions)
            

            <template>
            <div>
              <h1>当前最新的count的值为:{{$store.state.count}}</h1>
              <button @click="subAsync">-1 Async</button>
            </div>
            </template>
            
            <script>
            // 1- 按需导入mapActions
            import { mapActions } from 'vuex'
            export default {
              name:"Subtraction",
              data(){
                return{
                }
              },
              methods:{
                // 2- 展开mapAction函数,并且传入参数
                ...mapActions(['subAsync'])
              }
            }
            </script>
            

            • Getter(Vuex中的计算属性-本质也是一个函数)
              • 定义Getter
                • Getter本质上是一个函数,是VueX中的计算属性,Getter可以依赖于Store中原始数据的变化,并返回计算后的新数据
                • Getter的返回值会被缓存起来,只有依赖项发生变化的时候,Getter的值才会被从新计算 ```javascript // 引入vue import Vue from ‘vue’ // 引入vuex import Vuex from ‘vuex’

            // 使用Vuex Vue.use(Vuex)

            export default new Vuex.Store({ state: { count: 0 } getters: { // getter本质上就是一个函数,第一个形参永远都是state countPlus (state) { return state.count * 2 } } })

            
                  - 使用Getter的第一种方式
            ```vue
            <template>
            <div>
                <p>当前cuount最新的值为:{{this.$store.getters.countPlus}}</p> 
                <!-- 
                1- 在template模板中,可以省略掉this,直接写成以下方式
                 -->
                <p>当前cuount最新的值为:{{$store.getters.countPlus}}</p>
            
            </div>
            </template>
            <script>
            import {mapState} from 'vuex'
            export default {
              name:"Addition",
              data(){
                return{
                }
              }
            }
            </script>
            

              - 使用Getter的第二种方式
            

            <template>
            <div>
              <p>当前cuount最新的值为:{{countPlus}}</p>
            </div>
            </template>
            
            <script>
            import {mapState,mapGetters} from 'vuex'
            export default {
              name:"Addition",
              data(){
                return{
            
                }
              },
              computed:{
                // mapGetters辅助函数,仅仅是将state中的getter映射为当前组件的计算属性
                ...mapGetters(['countPlus'])
              }
            }
            </script>
            

            • Module(命名空间,为了防止命名冲突)

              • 声明用户模块

                export default {
                state: () => ({
                userInfo: {
                name: 'jack',
                age: 20
                }
                }),
                mutations: {
                updateUserInfo (state) {
                console.log(state);
                // 更新用户信息
                state.userInfo = { name: 'rows', age: 30 }
                }
                }
                }
                

              • 注册用户模块 ```javascript // 引入vue import Vue from ‘vue’

            // 引入vuex import Vuex from ‘vuex’

            // 导入用户模块 import moduleUser from ‘./ModuleUser’

            // 使用Vuex Vue.use(Vuex)

            export default new Vuex.Store({ modules: { // user就是用户模块的注册名称 user: moduleUser } })

            
                  - 使用模块数据中的第一种方式
            ```vue
            <template>
              <div class='container'>
                  <!-- 在template中可以使用this的方式,同时也可以使用$store的方式来访问数据-->
                <p>{{$store.state.user.userInfo.name}}</p>
                <p>{{this.$store.state.user.userInfo.age}}</p>
              </div>
            </template>
            <script>
            export default {
              data () {
                return {}
              }
            </script>
            <style scoped lang='less'>
            </style>
            

              - 使用模块数据中的第二种方式
            

            <template>
              <div class='container'>
              </div>
            </template>
            
            <script>
            import {mapState } from 'vuex'
            export default {
              data () {
                return {}
              },
              computed:{
            // 把User模块中的数据,映射为当前组件的计算属性
               ...mapState({
                   userinfo: state=> state.user.userinfo
               })
              }
            }
            </script>
            <style scoped lang='less'>
            </style>
            

              - 调用模块中Mutation方法的第一种方式
            

            <template>
              <div class='container'>
              <button @click="onBtnClick">点击我,查看updateUserInfo方法</button>
              </div>
            </template>
            
            <script>
            import { mapMutations } from 'vuex'
            export default {
              data () {
                return {}
              }
              methods: {
                // 访问命名空间下的state数据
                 // 参数1: 命名空间的名字
                // 参数2: 要映射的方法名字列表(数组或对象)
                ...mapMutations('user', ['updateUserInfo']),
                // 按钮的点击事件处理函数
                onBtnClick () {
                  console.log(this.updateUserInfo())
                }
              }
            }
            </script>
            <style scoped lang='less'>
            </style>
            

              - 访问命名空间下的action和getter
            

            <template>
              <div class='container'>
              </div>
            </template>
            <script>
            import { mapGetters, mapActions} from 'vuex'
            export default {
              data () {
                return {}
              },
              computed: {
                // 把User模块中的数据,映射为当前组件的计算属性
                ...mapActions('user',['userinfo'])
              },
              methods: {
                // 访问命名空间下的state数据
                // 参数1: 命名空间的名字
                // 参数2: 要映射的方法名字列表(数组或对象)
                ...mapGetters('user',['userinfo']),
              }
            }
            </script>
            <style scoped lang='less'>
            </style>
            

            10、webpack系列

            • 10-1 webpack概述

              • webpakc是一个模块化JavaScript的工具,在webpakc里一切文件皆都是模块,通过Loader转换文件,通过Plugin注入钩子,最后输出由多个模块组合成的文件,Webpack专注于构建模块化项目,
                
                一切文件: JavaScrip,CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源
                Webpack具有很大的灵活性,,能配置如何处理文件,大致使用如下

                module.exports={
                // 所有的模块如快快快,webpakc从入口开始递归解析出所有依赖的模块
                entry: './app.js'
                output: {
                // 把入口所依赖的所有模块,打包成一个文件bundle.js文件
                filename: 'bundle.js'
                }
                }
                

              • webpakc的优点是

                • 专注于处理模块化的项目,能做到开箱即用,一步到位
                • 通过Plugin扩展,完整好用又不失灵活
                • 使用场景不仅限于web
                • 庞大的社区,并且活跃度很高,经常引入紧跟时代的的新特新,能为大多数场景找到已有的开源拓展
                • 良好的开发体验
              • webpack的缺点是
                • 只能采用模块化开发的项目