vue使用Vuex状态管理模式

更新时间：2022年04月09日 17:37:38 作者：丶Serendipity丶

这篇文章介绍了vue使用Vuex状态管理模式的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1、基于单向数据流问题而产生了Vuex

单向数据流是vue 中父子组件的核心概念，props 是单向绑定的。当父组件的属性值发生变化的时候，会传递给子组件发生相应的变化，从而形成一个单向下行的绑定，父组件的属性改变会流向下行子组件中，但是反之，为了防止子组件无意间修改了父组件中的数据而影响到了其他的子组件的状态，vue 规定了从下往上的数据流是不允许的。当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

a、多个组件依赖于同一状态。组件之间传参变得特别繁琐，并且兄弟组件之间状态传递无能为力。

b、来自不同视图的行为需要变更同一状态。经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。应该根据你的应用开发需要进行权衡和确定。

2、安装及使用

CDN 方式： <script src="...vuex.js"></script>
    NPM 方式： npm install vuex --save
    Yarn方式： yarn add vuex
    其他方式：项目初始化是引入依赖
    无论哪种方式都需要  Vue.use(Vuex)来安装 Vuex

3、核心及使用方法

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 vuex的Vuex 核心 State 、Getters 、Mutation、Action、Module。

（1）State

Vuex也使用了单一状态树来管理应用层级的全部状态。唯一数据源。

单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

state存储状态类似于组件中data，在组件中访问状态经常有两种方法：分别为

a、通过 this.$store.state.属性的方式来访问状态，通常写在computed计算属性中，当然也可以直接通过插值表达式访问；

b、借助mapState 辅助函数。

核心代码如下：

<div id="app">
            {{ mycount }}<br>
            直接插值表达式访问
            {{ this.$store.state.count }}<br>
            {{ myinfoAge }}<br>
        </div>
        <script>
        import Vue from 'vue';
        import Vuex from 'vuex';
        import { mapState } from 'vuex'// 使用辅助函数一定记住引入
        const store = new Vuex.Store({
            // 存储状态数据
            state: {
                count: 0,
                info:{
                    name:"xiaoming",
                    age:18
                }
            },
        )
        new Vue({ 
            el: '#app',
            store,
            computed:{
                // a、计算属性方式
                mycount(){
                    return this.$store.state.count
                },
                // b、利用辅助函数赋值给对应变量，页面可以直接使用该变量
                 ...mapState({
                    myinfoAge: (state) => state.info.age,
                }),
                // 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。下面的简化写法相当于 info: (state) => state.info,
                ...mapState(["info"]),
            }
        })
        </script>

（2） Getters

store的一个计算属性，类比组件的计算属性,getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算,Getter 接受 state 作为其第一个参数,在state中的数据发生改变，计算属性重新计算

Getters 的状态存储相当于组件中计算属性，访问方式有三种：

a、通过属性访问

b、通过方法访问

c、通过mapGetters 辅助函数访问

核心代码如下：

<div id="app">
           {{ myInfoLength }}<br>
           直接插值表达式访问
           {{ this.$store.getters.infoLength }}<br>
           {{ myName }}<br>
           {{ infoLength }}
        </div>
        <script>
        import Vue from 'vue';
        import Vuex from 'vuex';
        import { mapGetters  } from 'vuex'// 使用辅助函数一定记住引入
        const store = new Vuex.Store({
            state: {
                info:[
                    {name:"name1",age:18},
                    {name:"name2",age:28}
                ]
            },
            // 存储状态数据
            getters: {
                infoLength: (state) => {
                    return state.info.length;
                },
                getNameByAge: (state) => (age) => {
                    return state.info.find(item => item.age === age).name
                }
            },
        )
        new Vue({ 
            el: '#app',
            store,
            computed:{
                // a、通过属性访问
                myInfoLength(){
                    return this.$store.getters.infoLength
                }
                // b、通过方法访问
                myName(){
                    return this.$store.getters.getNameByAge(18)
                }
                // c、mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
                ...mapGetters(["infoLength"])
            }
        })
        </script>

（3） Mutation

前面state和getters两个核心概念都是为了在store存储数据和访问数据的使用，Mutation则提供了对store中数据的修改功能，并且是唯一的更新方式，提交Mutation，Mutation主要包括两部分：字符串的事件类型（type）和一个回调函数（handler）,该回调函数的第一个参数就是state。

在视图组件中不能直接修改store容器中的状态，需要先在容器中注册一个事件函数，当需要更新状态时候需要提交触发该事件，同时可以向该事件传递参数。这里需要区别与组件内v-model双向绑定。提交事件方法有一下几种：

a、普通提交方式

b、对象风格提交

c、借助 mapMutations 辅助函数

其核心代码如下：

<div id="app">
            <button @click="handleAdd">点我加一</button>
            <button @click="handleAddForNum">点我加加</button>
            <button @click="handleAddForObj">对象添加</button>
            <button @click="handleAddMap">对象添加</button>
        </div>
        <script>
        import Vue from 'vue';
        import Vuex from 'vuex';
        import { mapMutations  } from 'vuex'// 使用辅助函数一定记住引入
        const store = new Vuex.Store({
            state: {
                count:1
            },
            mutations：{
                // 注册事件
                addCount(state){
                    state.count ++
                },
                addCountForNum(state,num){
                    state.count += num
                },
                addCountForObj(state,payload){
                    state.count += payload.num
                },
                addMap(state){
                    state.count ++
                }
            }
        )
        new Vue({ 
            el: '#app',
            store,
            methods:{
                // a、普通提交方式
                handleAdd(){
                    this.$store.commit('addCount')
                },
                handleAddForNum(){
                    this.$store.commit('addCountForNum',10)
                },
                // b、对象风格提交
                handleAddForObj() {
                    this.$store.commit({ type: "addCountForObj", num: 100 });
                },
                // c、借助 mapMutations 辅助函数
                ...mapMutations(["addMap"]),
                handleAddMap(){
                    this.addMap()
                }
            }
        })
        </script>

Mutation 需遵守 Vue 的响应规则，Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：最好提前在你的 store 中初始化好所有所需属性。当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象。例如，利用对象展开运算符 state.obj = { ...state.obj, newProp: 123 }

注意：Mutation 必须是同步函数。在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？

（4） Action

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.action 用于异步的修改state，它是通过muation间接修改state的。

context是和store对象具有相同方法和属性的对象.也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

若需要异步操作来修改state中的状态，首先需要action来注册事件，组件视图在通过dispatch分发方式调用该事件，该事件内部提交mutation中的事件完成改变状态操作，总之，通过action这个中介来提交mutation中的事件函数.分发事件方法如下：

a、普通提交方式

b、对象风格提交

c、借助 mapActions 辅助函数

核心代码如下：

<div id="app">
            <button @click="handleAdd">点我加一</button>
            <button @click="handleAddTen">点我加十</button>
            <button @click="handleAddForObj">对象添加</button>
            <button @click="handleAddMap">对象添加</button>
        </div>
        <script>
        import Vue from 'vue';
        import Vuex from 'vuex';
        import { mapMutations,mapActions  } from 'vuex'// 使用辅助函数一定记住引入
        const store = new Vuex.Store({
            state: {
                count:1
            },
            // 注册事件修改state状态值
            mutations：{
                addCount(state){
                    state.count ++
                },
                addCountForNum(state,num){
                    state.count += num
                },
                addCountForObj(state,payload){
                    state.count += payload.num
                },
                addMap(state){
                    state.count ++
                }
            },
            // 注册事件,提交给 mutation
            actions：{
                addAction(context){
                    setTimeout(() => {
                        context.commit('addCount')
                    }, 1000)
                },
                addActionForNum(context,num){
                    setTimeout(() => {
                        context.commit('addCountForNum',num)
                    }, 1000)
                },
                addActionForObj(context,payload){
                    setTimeout(() => {
                        context.commit('addCountForObj',payload)
                    }, 1000)
                },
                addActionMap(context){
                    setTimeout(() => {
                        context.commit('addMap')
                    }, 1000)
                }
            }
        )
        new Vue({ 
            el: '#app',
            store,
            methods:{
                // a、普通提交方式
                handleAdd(){
                    this.$store.dispatch('addAction')
                },
                handleAddTen(){
                    this.$store.dispatch('addActionForNum',10)
                },
                //  b、对象风格提交
                handleAddForObj(){
                    this.$store.dispatch({
                        type: 'addActionForObj',
                        amount: 10
                    })
                }
                // 借助 mapActions 辅助函数
                ...mapActions(["addActionMap"]),// 相当于...mapActions({addActionMap："addActionMap"}) 
                handleAddMap(){
                    this.addActionMap()
                }
            }
        })

组合 Action:组合多个 action，以处理更加复杂的异步流程.store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。假设 getData() 和 getOtherData() 返回的是 Promise。

actions: {
            async actionA ({ commit }) {
                commit('gotData', await getData())
            },
            async actionB ({ dispatch, commit }) {
                await dispatch('actionA') // 等待 actionA 完成
                commit('gotOtherData', await getOtherData())
            }
        }

（5）Modules

Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等

4、Vuex和全局对象的不同

（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

（2）你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

到此这篇关于vue使用Vuex状态管理模式的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

babel7.x和webpack4.x配置vue项目的方法步骤
这篇文章主要介绍了babel7.x和webpack4.x配置vue项目的方法步骤,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
Vue项目中如何封装axios（统一管理http请求）
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
vue转react useEffect的全过程
这篇文章主要介绍了vue转react useEffect的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue+webpack dev本地调试全局样式引用失效的解决方案
今天小编就为大家分享一篇vue+webpack dev本地调试全局样式引用失效的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue组件通信$attrs、$listeners实现原理解析
这篇文章主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
Vue 后台管理类项目兼容IE9+的方法示例
这篇文章主要介绍了Vue 后台管理类项目兼容IE9+的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
Vue项目全局配置页面缓存之按需读取缓存的实现详解
这篇文章主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧
2018-08-08
详解vue-cli项目中怎么使用mock数据
这篇文章主要介绍了vue-cli项目中怎么使用mock数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vuex直接修改state、commit和dispatch修改state的用法及区别说明
这篇文章主要介绍了vuex直接修改state、commit和dispatch修改state的用法及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
详解Vue双向数据绑定原理解析
本篇文章主要介绍了详解Vue双向数据绑定原理解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09