Vuex4状态管理

什么是状态管理

在开发中，我们的应用程序需要处理各种各样的数据，这些数据需要保存在应用程序的某一个位置，对于这些数据的管理，就是 状态管理
目前前端项目越来越复杂，多组件共享同一数据的状态很常见，因此需要一个更加方便地状态管理库

Vuex状态管理

在Vuex中，组件通过读取Vuex中的State数据状态，显示到页面上
而组件想要修改State中的数据，需要通过Dispatch，提交Mutations进行修改，禁止直接对State进行修改

Vuex安装和基本使用

在用脚手架搭建的过程中，可以直接进行安装
同时，我们也可以手动进行安装 npm install vuex
在安装完成之后，在 src目录下创建store文件夹，并创建index.js文件

js 复制代码

//引入createStore函数
import { createStore } from "vuex";

//创建store对象
const store = createStore({
  //会直接把对象返回出去
  state: () => ({
    counter: 100,
  }),
  //等同于以下写法
  //   state() {
  //     return { counter: 100 };
  //   },
});

export default store;

之后再 main.js文件中，引入store即可

js 复制代码

import { createApp } from "vue";
import App from "./App.vue";
//引入store对象
import store from "./store";

const app = createApp(App);
//使用store对象
app.use(store);
app.mount("#app");

在组件 template中使用

html 复制代码

<div>
    {{$store.state.counter}}
</div>

在options API中使用
- 通常是在 computed计算属性中进行使用

js 复制代码

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

在composition API中使用
- 需要引入 useStore函数进行使用
- 若直接定义变量进行赋值，则不会是响应式 const counter = store.state.counter
- 需要进行响应式的处理

js 复制代码

import { computed, toRef } from "vue";
import { useStore } from "vuex";
const store = useStore();
//可以用计算属性返回
const counter = computed(() => {
  return store.state.counter;
});
//可以通过toRef转成响应式
const counterRef = toRef(store.state.counter);

与单纯的全局对象有什么区别

Vuex的状态存储是响应式的
不能直接改变store中的状态（代码上可以直接更改，但是规范上不可以）

单一状态树

Vuex使用的是单一状态树
- 用一个对象就包含了全部应用层级的状态
- 即一个项目中，只会创建一个store进行状态管理
若多个组件有不同的状态进行管理
- 可以进行module进行模块化，管理多个组件的状态
优势
- 单一状态树能够让我们 最直接的方式找到某个状态的片段
- 方便维护和调试
但是相对于pinia不够灵活

Vuex-Store的State映射到组件中

目的是取状态更为方便一点，就像在组件内部定义变量一样使用

options API--mapState

在options API中我们可以使用 mapState函数进行映射
传入参数
- 数组：需要是state中存在的属性
- 对象：用于 state中的属性与组件本身的变量命名冲突
返回值
- 返回的就是一个函数，可以直接用于computed中

js 复制代码

//比如现在store中存在以下属性
//name: "zhangcheng",
//age: "18",
//address: "hebei",

import { mapState } from "vuex";
computed: {
    //传入数组参数
    ...mapState(["name", "age", "address"]),
        //等同于以下写法
        // name() {
        //   return this.$store.state.name
        // }
        //传入对象参数
        ...mapState({
        sName: (state) => state.name,
    }),
},

composition API中将state映射到组件

前面我们知道在vuex中有一个mapState函数，可以帮助我们完成映射

mapState返回的函数，内部实际上用到了 this.$store.state
- 我们知道，composition中，无法使用this，且this中没有$store
而在前面，我们知道composition API中 需要用到 useState函数

js 复制代码

import { useStore } from "vuex";
const store = useStore();
//通过store.state.name获取

如果想将 useState函数和mapState函数结合使用
- 将 mapState返回值，传入到computed计算属性中（computed内部接收一个函数）
- 同时改变 参数的this指向

js 复制代码

//获取计算属性
import { computed } from "vue";
//获取mapState与useStore函数
import { mapState, useStore } from "vuex";

//获取返回值，此时的name是一个函数
const { name } = mapState(["name"]);

const store = useStore();
//在传入name的时候，通过bind改变this指向
//因为computed需要传入一个函数，而call和apply返回值都是函数本身的返回值
//而bind返回的是一个函数
const cName = computed(name.bind({ $store: store }));

以上方法比较繁琐，我们可以通过以下方式进行
- 通过解构的方法，用toRefs包裹即可

js 复制代码

import { toRefs } from "vue";
import { useStore } from "vuex";

const store = useStore();
//解构的时候对变量重命名
//注意使用toRefs
const { name: cName, age } = toRefs(store.state);

getter的基本使用

类似于computed计算属性，对state中的数据可以进行复杂逻辑的处理

在定义store对象的时候，可以配置getters选项
第一个参数state，接收的就是state中的变量
第二个参数getters，接收的就是getter中的变量
返回值可以返回一个函数，这样就可以让外界传值进来

js 复制代码

//引入createStore函数
import { createStore } from "vuex";

//创建store对象
const store = createStore({
  //会直接把对象返回出去
  state: () => ({
    name: "zhangcheng",
    age: "18",
    address: "hebei",
  }),
  getters: {
    //第一个参数用于接收state中的变量
    nameAge(state) {
      return state.name + state.age; //"zhangcheng18"
    },
    //第二个参数，用于接收getters中的变量
    info(state, getters) {
      return getters.nameAge + state.address; //"zhangcheng18hebei"
    },
    //可以返回一个函数，用于接收变量
    returnInfo(state) {
      return function (name) {
        return `${name} is ${state.name} friend`;
      };
    },
  },
});

实际调用

html 复制代码

<div>nameAge{{ $store.getters.nameAge }}</div>
<div>info{{ $store.getters.info }}</div>
<div>returnInfo{{ $store.getters.returnInfo("lisi") }}</div>
nameAgezhangcheng18
infozhangcheng18hebei
returnInfolisi is zhangcheng friend

对于 getters中的变量 ，也有相应的映射函数，mapGetters的用法同mapState的用法一样

Mutation基本使用

是Vuex中修改State的唯一途径

在mutation中写的都是同步代码，不能写异步代码，比如进行网络请求

首先在创建创建 store对象时候，配置mutation选项
- 第一个参数 state用于访问state中的状态
- 第二个参数 payload用于接收传入的参数

js 复制代码

//创建store对象
const store = createStore({
  //会直接把对象返回出去
  state: () => ({
    name: "zhangcheng",
    age: "18",
    address: "hebei",
  }),
  mutations: {
    changeName(state,payload) {
      state.name = payload;
    },
  },
});

在options API中的使用

仅需在对应的methods中，使用commit访问即可
- commit中的第一个参数，要与mutation中准备调用方法的名字保持一致

js 复制代码

methods:{
    change(){
        this.$store.commit("changeName","lisi")
    }
}

在compositions API中的使用

在setup中，引入useStore函数
调用commit方法即可

js 复制代码

import {useStore} from "vuex"

const store = useStore()
const changeInfo = store.commit("changeInfo")

actions的基本使用

Action类似于mutation，但是不同的地方在于
- Action提交的是mutation，而不是直接变更状态
  - 在action中，并不是对State进行修改，而是通过mutation进行修改
- Action可以包含任何异步操作
在创建store实例的时候

js 复制代码

 mutations: {
    changeName(state, payload) {
      state.name = payload;
    },
  },
  actions: {
    changeNameAction(context, payload) {
      //第一个参数相当于store实例，但实际上不是
      //第二个参数是通过dispatch调用方法，传入的参数
      context.commit("changeName", payload);
    },
  },

调用
- 通过 dispatch函数进行调用

js 复制代码

change() {
    this.$store.dispatch("changeNameAction", "lisi");
},

实际用法

actions中通常是进行网络请求的
而mutations中是修改state的唯一途径
下面是一个实际案例的做法
- 我们通过Vuex进行状态管理
- 在actions中，请求数据，通过commit提交mutation
- 在mutation中修改state

js 复制代码

//创建store对象
const store = createStore({
  //会直接把对象返回出去
  state: () => ({
    list: [],
  }),
  mutations: {
    //修改state
    changeName(state, payload) {
      state.list = payload;
    },
  },
  actions: {
    //进行网络请求，并且提交commit申请
    changeNameAction(context, payload) {
      fetch(xxxxx)
        .then((res) => {
          return res.json();
        })
        .then((res) => {
          context.commit("changeName", res);
        });
    },
  },
});

若在组件中，通过 dispatch函数调用了actions中的方法 ，也想拿到返回值
- 那么这个方法需要返回一个promise

js 复制代码

actions:{
    changeName(){
        return new Promise((resolve)=>{
            resolve(123)
        })
    }
}

//实际调用的时候
this.$store.dispatch("changeName").then((res)=>{
    console.log(res)
})

module的基本使用

在使用Vuex进行状态管理的时候，难免维护的状态会十分庞大
因此我们可以使用 modules将store分割成模块
每个模块都拥有自己的state、mutation、action、getter，甚至可以嵌套子模块
创建一个模块

js 复制代码

export default{
    state:()=>({}),
    getters:{},
    mutations:{},
    actions:{}
}

在创建 store对象的时候，引入模块

js 复制代码

import homeModule from "../home.js"
import { createStore } from "vuex";

const store = createStore({
    modules:{
        //引入模块的名字：实际引入的模块
        home:homeModule
    }
})

//在实际使用中，mutation以及action、getters   可以直接读取
//而读取state中的数据有所变化
store.state.home.name

module的局部状态

上面我们知道可以进行分模块的操作

那么我们想在模块中，访问根模块的内容需要怎么访问
比如在 home模块中

js 复制代码

getters:{
    changeCounter(state,getters,rootState){
        //state是本模块中的状态
        //getters是本模块中的getters
        //rootState是根模块的state
    }
}
//同理mutation和actions

且 actions、mutations和getters中的命名不能与根组件中重复

Vue3.0（六）：VueX 4.x详解

Vuex4状态管理

什么是状态管理

Vuex状态管理

Vuex安装和基本使用

与单纯的全局对象有什么区别

单一状态树

Vuex-Store的State映射到组件中

options API--mapState

composition API中将state映射到组件

getter的基本使用

Mutation基本使用

在options API中的使用

在compositions API中的使用

actions的基本使用

实际用法

module的基本使用

module的局部状态