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

Vuex4状态管理

什么是状态管理

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

Vuex状态管理

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

Vuex安装和基本使用

• 在用脚手架搭建的过程中，可以直接进行安装

• 同时，我们也可以手动进行安装 npm install vuex

• 在安装完成之后，在 src目录下创建store文件夹，并创建index.js文件

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

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

export default store;

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

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中使用

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

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

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

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

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映射到组件中

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