Vue3.js - 一文看懂Vuex

1. 前言

Vuex 是 Vue.js 的官方状态管理库，用于在 Vue 应用中管理组件之间共享的状态。Vuex 适用于中大型应用，它将组件的共享状态集中管理，可以避免组件间传递 props 或事件的复杂性。

2. 核心概念

我们可以将Vuex想象为一个大型的Vue，存储在Vuex中的数据，方法无论在任何组件中我们都可以使用，调用，修改

Vuex中的核心组件包括不仅限于以下部分：

• State（状态）：存储应用的状态数据。
• Getters（获取器）：可以视图化 state，类似于 Vue 组件中的计算属性，用于获取 state 的值并进行加工。
• Mutations（变更）：同步修改 state 的方法。唯一能直接修改 state 的地方。
• Actions（行为）：用于处理异步操作，类似于 mutations，但可以包含异步代码，最终通过 mutations 更新 state。
• Modules（模块化）：当应用状态变得复杂时，可以将 Vuex store 分割成模块，每个模块拥有自己的 state、mutations、actions 和 getters。

3. Vuex的安装

npm install vuex@next
# or
yarn add vuex@next

如果可以指定vuex安装的版本，目前最新版本为vuex4

4. 创建vuex

我们常见于在工程项目中单独使用一个文件夹存放我们的vuex脚本

在src中新建一个store文件夹创建一个js脚本，开始我们创建vuex的第一步

import {createStore} from 'vuex'
const store = createstore({}) 

导入vuex中的createstore函数，为其配置相应的对象变量

4.1 state 状态

const store = createStore({
    state:{count:0}
})

上述代码中为store配置了state，state中存储我们的"全局数据"count赋值为0，在其他组件中我们可以调用查看我们的count

4.2 mutations 变更

const store = createStore({
    state:{count:0},
    mutations:{increment(state,value){xxxx}}
})

唯一可以直接修改state的地方

上述代码配置了mutations组件，类比于vue中的methods，mutations中包装了若干个函数，可以为函数传入state组件，便可以访问以及操作state中存储的数据；value则是想要传入的数据。

mutations 存储的函数也是全局的，任意组件都可以进行调用

4.3 getter 获取器

const store = createStore({
    state:{count:0},
    mutations:{},
    getters:{count10(state){return state.count+10}}
})

类比于vue中的computed属性，返回一个操作之后的全局数值

4.4 actions 行为

用于处理异步操作，类似于 mutations，但可以包含异步代码，最终通过 mutations 更新 state

actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },

5. vue中使用vuex

5.1 vue注册

需要在应用中注册 Vuex store。在 main.js 文件中导入并使用 Vuex store：

//main.js文件
import {createApp} from 'vue'
import App from './App.vue'
import {store} from './store/index.js'

app = createApp(App) //创建vue，并将App组件传入
app.use(store) //让我们的app这个vue组件使用vuex组件
app.mount('#app') //挂载到html文件中

5.2 在组件中访问vuex

在 Vue 组件中通过 this.$store 访问 Vuex store。例如，在模板中访问 count 和 doubledCount，并触发 mutations 和 actions。

通常使用$标识符代表使用vue上的实例的全局组件。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="asyncIncrement">Async Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    // 通过 getter 获取状态
    count() {
      return this.$store.state.count;
    },
    doubledCount() {
      return this.$store.getters.doubledCount;
    }
  },
  methods: {
    // 触发 mutations
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
    // 触发 actions
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement');
    }
  }
};
</script>

6. modules

当应用变得较为复杂时，你可以通过模块化来管理 store。每个模块可以拥有自己的 state、mutations、actions 和 getters，从而更好地组织代码。

与vue类似，创建不同的vuex组件(module)，最后使用一个大的框架组件将其他模块进行涵盖

// store/modules/user.js
export default {
  state: {
    name: 'John Doe'
  },
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  },
  actions: {
    updateName({ commit }, name) {
      commit('setName', name);
    }
  },
  getters: {
    userName(state) {
      return state.name;
    }
  }
};

// store/modules/cart.js
export default {
  state: {
    items: []
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    }
  },
  actions: {
    addItemToCart({ commit }, item) {
      commit('addItem', item);
    }
  },
  getters: {
    cartItems(state) {
      return state.items;
    }
  }
};

最后在总组件中配置modules，使用modules进行配置

// store.js
import { createStore } from 'vuex';
import user from './modules/user';
import cart from './modules/cart';

const store = createStore({
  modules: {
    user,
    cart
  }
});

export default store;

7. 总结

总的来说，vuex是处理状态管理的一个强大工具。

在较大型项目中避免重复持续的使用事件配置以及props进行处理组件之间的数据

Vuex 在 Vue 3 中依然是响应式的。这意味着，当 Vuex 中的 state 被改变时，所有依赖该 state 的组件会自动重新渲染，确保 UI 始终与 state 保持同步。