vue使用Vuex状态管理模式

2024-04-02 19:04:59 815人浏览安东尼

摘要

目录1、基于单向数据流问题而产生了Vuex2、安装及使用3、核心及使用方法（1）State（2） Getters（3） Mutation（4） Action（5）Modules4、V

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())
            }
        }