深入学习Vuex状态管理器：安装、使用和应用场景

什么是Vuex?

Vuex是一个专门为Vue.js应用设计的状态管理模式。它提供了一种可预测的状态管理方式，可以将Vue组件中的共享状态抽离出来，集中到一个全局的状态管理器中进行管理。通俗点讲，就是Vuex可以帮助你更好的管理你的Vue项目中的数据，让你的数据更加可控和易于维护。

Vuex的运用场景

1. 面向大型单页面应用，存在复杂的组件关系或异步数据流。

2. 需要实现多个组件或视图之间的状态共享和交互。

3. 需要方便地跟踪、监测、调试和记录应用的状态变化和执行日志。

4. 应用数据流比较复杂，需要统一的状态管理机制，以保证数据的完整性和一致性。

5. 需要实现应用状态和数据的持久化存储、恢复和管理等。

安装Vuex

在创建Vue项目时,选择Vuex选项,会自动安装并且配置上Vuex插件

使用辅助函数时都需要引入对应函数

import {map方法名} from 'vuex'

1. 状态数据 state

state指的是整个应用的共享状态数据，等同于应用程序中的全局变量。

声明数据

在 store/index.js 中声明

export default new Vuex.Store({
  //状态数据，要共享的数据必须放在这里
  state: {
    username: '六思逸',
    age: 23,
  },
})

访问数据

第一步：在计算属性中获取数据

方法一：直接使用 vuex 里面的数据

computed:{
    username(){
        return this.$store.state.username;
    },
    age(){
        return this.$store.state.age;
    }
}

方法二：通过辅助函数使用 vuex里面的数据

数组方式

computed:{
    ...mapState(['username', 'age']),
}

对象方式，可以取别名

computed:{
    ...mapState({
        un: state=>state.username,
        age: state=>state.age,
    }),
}

第二步：在页面模板中使用数据

<template>
    <div>
        <h1>状态数据 state</h1>
        <h1>{{un}}</h1>
        <h1>{{age}} 岁</h1>
    </div>
</template>

2.修改数据 mutations

mutations用于修改state中的状态数据。它类似于事件管理器，并提供了一种命名的方式来描述事物的状态变化。

声明mutations方法

在 src/store/index.js 找到 mutations 里面写方法，是唯一可以修改vuex数据的方式.

年龄累加函数

mutations: {
    add(state, payload) {
      state.age += payload;
    },
},

提交mutations修改数据

调用提交mutations有两种方式：直接提交 和 辅助函数

直接提交

methods:{
    add(n){
        this.$store.commit('add', n);
    },
}

辅助函数

methods:{
    // 数组方式 
    ...mapMutations(['add']),

    // 对象方式，可以取别名
    ...mapMutations({
        add: 'add',
    }),
}

3.数据二次处理 getters

getters用于对state中的数据进行二次处理或计算，它类似于Vue中的计算属性，可以基于一些已有的state计算出派生出新的状态，以供组件使用。

声明二次处理函数

getters: {
    showName(state) {
        if (state.age >= 18) {
            return '姓名：' + state.username;
        } else {
            return '姓名：' + state.username + '（未成年）';
        }
    },
},

使用getters二次处理函数

直接使用getters二次处理方法

export default {
    computed:{
        showName(){
            return this.$store.getters.showName;
        },
    }
}

辅助函数调用getters

export default {
    computed:{
        // 数组方式
         ...mapGetters(['showName']),

        // 对象方式，可以取别名
        ...mapGetters({
            username:'showName',
        })
    }
}

4.异步修改数据 actions

actions用于处理异步操作，或者在mutations中不能直接实现的复杂操作，比如API请求、异步操作、封装成段的mutations等。

声明异步修改数据函数

actions: {
    asyncAdd(context, payload) {
        //1秒以后再提交修改
        setTimeout(() => {
            context.commit('add', payload);
        }, 1000);
    },
},

使用actions方法

直接调用actions的方法

methods:{
        add(n){
            this.$store.dispatch('asyncAdd', n)
        },
}

辅助函数调用actions

methods:{
        // 数组方式
         ...mapActions(['asyncAdd', 'asyncReduce']),

        // 对象方式，可以取别名
        ...mapActions({
            add:'asyncAdd',
        })
}

5. 多模块 modules

modules用于将各个功能模块分离开来，使得状态管理更加模块化，每个模块管理自己独立的状态数据mutations、actions、getters等。

分模块

A模块

  modules: {
    moduleA: {
      namespaced: true, //启用命名空间
      state: {
        username: '杜甫',
        age: 20,
      },
      mutations: {
        //修改模块A的年龄
        add(state, payload) {
          state.age += payload;
        }
      },
      getters: {},
      actions: {},
    },
  }

B模块

  modules: {
    moduleB: {
      namespaced: true, //启用命名空间
      state: {
        username: '王维',
        age: 28,
      },
      mutations: {
        //修改模块B的年龄
        add(state, payload) {
          state.age += payload;
        }
      },
      getters: {},
      actions: {},
    }
  }

分模块读数据

computed:{
        //访问模块A的数据
        usernameA(){
            return this.$store.state.moduleA.username;
        },
        ageA(){
            return this.$store.state.moduleA.age;
        },

        //访问模块B的数据
        usernameB(){
            return this.$store.state.moduleB.username;
        },
        ageB(){
            return this.$store.state.moduleB.age;
        },
},

分模块修改数据

注意：必须开启命名空间

methods:{
    //修改模块A的年龄
    addA(){
        this.$store.commit('moduleA/add', 1);
    },

    //修改模块B的年龄
    addB(){
        this.$store.commit('moduleB/add', 2);
    }
}