程序员H5前端技术分享让前端飞

Vuex学习之路-入门篇

2018-08-17  本文已影响452人  胡哥有话说

概述

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

概述解读

从vuex的概念中我们可以获取到以下重点信息:

生命的意义

Vuex为Vue.js而生,是一种数据状态管理模式

优秀之处

  1. 数据仓库: 集中式存储

  2. 组件通信: 便于在各个组件之间进行数据共享、传递

  3. 单项数据流: 遵循特定的规则,特定的入口改变数据,特定的出口输出数据,同时可监测到数据的变化过程

    vuex单项数据流模式图

Vuex的基本使用流程 - 简单计数器

  1. 下载安装依赖

     npm i vuex -s
    
  2. 创建store仓库,并在vue中挂载

     //  src/store/index.js
     import Vuex from 'vuex'
     import Vue from 'vue'
    
     Vue.use(Vuex)
     
     const store = new Vuex.Store({
         // 声明在仓库中的数据
         state: {
             number: 1
         }
     })
     export default store
     
     // src/main.js
     import store from '@/store'
     new Vue({
         // ...
         store
     })
    
  3. 在组件中使用state数据

    vuex通过computed计算属性监测数据的变化,进而影响到所有组件中数据的状态

    a. 计算属性中使用this.$store.state获取

     computed: {
         number () {
             return this.$store.state.number
         }
     }
    

    b. 借助辅助函数mapState实现

     // 组件内引入mapState
     import { mapState } from 'vuex'
     
     computed: {
         ...mapState([
             'number'
         ])
     }
    
  4. 在store中定义mutations,改变state状态

     new Vuex.Store({
         // ...
         mutations: {
             plus (state) {
                 state.number++
             }
         }
     })
    
  5. 在各个组件中可以通过提交mutations改变state数据

     // src/App.vue
     <template>
         <div id="a-com">
             <h3>state的number: {{ number }}</h3>
             <a-com></a-com>
             <b-com></b-com>
         </div>  
     </template>
     <script>
     import { mapState } from 'vuex'
     import ACom from '@/components/ACom
     import BCom from '@/components/BCom
     export default {
         name: 'App',
         computed: {
             ...mapState([
                 'number'
             ])
         },
         components: {
             ACom,
             BCom
         }
     }
     </script>
     
     // src/components/ACom.vue
     <template>
         <div id="a">
             <h3>A组件的number: {{ number }}</h3>
             <button @click="plusNumber">+</button>
         </div>  
     </template>
     <script>
     import { mapState, mapMutations } from 'vuex'
     export default {
         name: 'A',
         computed: {
             ...mapState([
                 'number'
             ])
         },
         methods: {
             // 返回需要的mutations函数
             ...mapMutaions([
                 'plus'
             ]),
             plusNumber () {
                 // 1. 直接通过store提交mutations
                 // 此处plus是mutations中的方法
                 // this.$store.commit('plus')
                 
                 // 2. 使用mapMutations辅助函数                    this.plus()
             }
         }
     }
     </script>
    

    在src/components/BCom.vue中定义相同的结构

    以上操作后,效果如下图:


    组件效果图

    当点击A+或者B+的按钮时都会触发数据仓库state中的number变化

小结

通过vuex我们在不同的组件中共享了数据,实现了某个组件改变数据时,其他组件同时响应

vuex的应用场景

  1. 检测用户是否登录

     当在登录组件中处理了登录信息后,存入state仓库中,可在所有的组件中进行用户数据共享,判断是否有权限
    
  2. 非父子组件值传递

    其实父子组件中也是可以使用vuex,主要看业务的复杂度
    

只要涉及到多组件数据进行共享、传递,都可以选择使用vuex

结语

以上就是胡哥给各位小伙伴带来的Vuex学习之路-入门篇,关于Vuex中actions、与后端的数据请求方式以及多模块状态管理分割内容,请关注胡哥的下一篇文章:Vuex学习之路-进阶篇

转载须知

原创不易:本文原创首发于简书,转载请注明来源地址和作者

上一篇下一篇

猜你喜欢

热点阅读