Vuex学习之路-入门篇

概述

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学习之路-进阶篇

转载须知

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