Vuex：深入理解所涉及的几个问题

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

一、Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、Vuex 的原理

Vuex 的原理是通过集中管理应用的状态，并提供一套规则和方法来确保状态的变更是可预测、可追踪和可维护的。涉及以下几个关键概念：

1. 集中式状态管理：Vuex 将所有组件的状态集中管理在一个全局的存储对象中。
2. 响应式数据：Vuex 使用 Vue 的响应式系统，确保状态变更能够触发视图的更新。
3. 状态变更的唯一方式：状态的变更只能通过提交 mutation 来完成，确保状态变更的可追踪和同步。
4. 模块化：Vuex 允许将状态分割成模块，每个模块拥有自己的状态、mutation 和 action。
5. 异步处理：action 用于处理异步操作，完成后通过 commit 提交 mutation 来变更状态。
6. 热重载和时间旅行：Vuex 开发工具支持热重载和时间旅行调试，便于开发和调试。

三、为什么要使用 Vuex?

Vuex 提供了一种高效、可预测且可维护的方式来管理 Vue 应用的状态，尤其适用于大型或复杂应用。具有以下优势：

1. 集中式管理状态：为 Vue 应用提供一个集中的地方来存储所有组件的状态。
2. 解决组件通信问题：简化跨组件的状态共享和通信。
3. 维护状态一致性：确保应用状态的一致性和可预测性。
4. 提高开发效率：通过集中管理状态，提高开发和维护的效率。
5. 增强可维护性：清晰的结构和规范使得代码更易于维护和扩展。
6. 支持时间旅行调试：通过与 Vue Devtools 集成，支持时间旅行调试功能。
7. 模块化：支持模块化管理状态，使得大型应用更易于组织。

四、Vuex 有哪几种属性？

• state：用于存储全局的状态，类似于组件中的data。
• getters：用于对state进行计算或过滤，类似于组件中的computed。
• mutations：用于修改state的值，必须是同步操作。
• actions：用于处理异步操作或批量的mutations操作，可以包含任意异步操作。
• modules：用于将store分割成模块，每个模块都有自己的state、getters、mutations、actions。

五、Vuex 中 action 和 mutation 的区别？

1. Mutation：
   • mutation 用于直接变更 store 中的状态，必须是同步函数。
   • 它们是 Vuex 中修改状态的唯一方法，必须通过 commit 调用。
2. Action：
   • action提交的是 mutation，而不是直接变更状态。
   • action 可以包含任意异步操作。

六、为什么 Vuex 的 mutation 中不能做异步操作？

主要原因是为了确保状态的变更是可预测和同步的：

1. 可预测性：同步操作使得状态变更的流程清晰且可预测，便于开发者理解和追踪状态变化，同时也方便调试。
2. 同步性：异步操作可能导致状态在不同时间点被多次修改，这会使得状态变更的顺序变得复杂和难以控制。

七、Vuex 和单纯的全局对象有什么区别？

Vuex 是一个专为 Vue 应用设计的状态管理模式，提供了响应式、模块化、可追踪和可扩展（插件、调试工具）的状态管理机制，而单纯的全局对象则缺乏这些特性。

八、Vuex 的严格模式是什么？有什么作用？如何开启？

开启严格模式，仅需在创建 store 的时候传入 strict: true：

const store = new Vuex.Store({
  // v3.x
  strict: true
})

const store = createStore({
  // v4.x
  strict: true
})

在严格模式下，无论何时发生了状态变更，如果不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

注意，不要在发布环境下启用严格模式！因为严格模式会深度监测状态树来检测不合规的状态变更，会造成性能损失。

九、Vuex 刷新页面后数据就消失了，如何持久化保存数据？

Vuex3.x

1.使用浏览器的 localStorage 或 sessionStorage 来保存状态。

（1）数据持久存储本地插件 localStoragePlugin.js

export default store => {
    store.subscribe((mutation, state) => {
        localStorage.setItem('vuexState', JSON.stringify(state))
    })
}

（2）定义仓库 store.js

import Vue from 'vue'
import Vuex from 'vuex'
import localStoragePlugin from './localStoragePlugin'

Vue.use(Vuex)

let storeObj = {
    count: 0
}

const localData = localStorage.getItem('vuexState')
if (localData) {
    storeObj = JSON.parse(localData)
}

export const store = new Vuex.Store({
    state: storeObj,
    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    },
    mutations: {
        increment(state) {
            state.count++
        }
    },
    plugins: [localStoragePlugin]
})

（3）main.js 中注入仓库

import Vue from 'vue'
import App from './App.vue'
import { store } from './store'

new Vue({
    render: (h) => h(App),
    store
}).$mount("#app")

（4）组件中使用仓库数据 HomePage.vue

<template>
    <div>
        <div>
            count - {{ count }}
        </div>
        <div>
            doubleCount - {{ doubleCount }}
        </div>
        <div>
            <button @click="handleClick">Increment</button>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
    computed: {
        ...mapState(['count']),
        ...mapGetters(['doubleCount'])
    },
    methods: {
        handleClick() {
            this.$store.commit('increment')
        }
    }
}
</script>

2.使用 vuex-persistedstate 插件实现持久化数据存储。

安装插件

npm install vuex-persistedstate

使用插件

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
 
Vue.use(Vuex)

export default new Vuex.Store({
  // ...state, mutations, actions等定义...
 
  plugins: [createPersistedState({
    storage: window.sessionStorage // 或者localStorage
  })]
})

Vuex4.x

1.使用浏览器的 localStorage 或 sessionStorage 来保存状态。

（1）数据持久存储本地插件 localStoragePlugin.js

export default store => {
    store.subscribe((mutation, state) => {
        localStorage.setItem('vuexState', JSON.stringify(state))
    })
}

（2）定义仓库 store.js

import { createStore } from 'vuex'
import localStoragePlugin from './localStoragePlugin'

let storeObj = {
    count: 0
}

const localData = localStorage.getItem('vuexState')
if (localData) {
    storeObj = JSON.parse(localData)
}

export default createStore({
    state() {
        return storeObj
    },
    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    },
    mutations: {
        increment(state) {
            state.count++
        }
    },
    plugins: [localStoragePlugin]
})

（3）main.js 中注入仓库

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

（4）组件中使用仓库数据 HomePage.vue

<template>
    <div>
        <div>
            count - {{ count }}
        </div>
        <div>
            doubleCount - {{ doubleCount }}
        </div>
        <div>
            <button @click="handleClick">Increment</button>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const count = computed(() => store.state.count);
const doubleCount = computed(() => store.getters.doubleCount);

function increment() {
    store.commit('increment')
}
</script>

2.使用 vuex-persistedstate 插件实现持久化数据存储。

安装插件

npm install vuex-persistedstate

使用插件

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({
    // ...state, mutations, actions等定义...
 
  plugins: [createPersistedState({
    storage: window.sessionStorage // 或者localStorage
  })]
})

注意，vuex-persistedstate 插件同时兼容 Vuex3.x 和 Vuex4.x。

十、Vuex 和 Pinia 的区别？

1.架构设计

• Vuex 采用集中式设计，所有状态都存储在一个全局的状态树（Store）中。
• Pinia 采用模块化设计，可构建多个Store，将状态分布在多个模块中。并允许打包工具对它们自动拆分。

2.代码风格和语法

• Vuex 中更改 Store 中的状态的方法是提交mutations，mutations是同步的，用于实际修改状态。actions提交的是mutations，而不是直接变更状态，actions可以包含任意异步操作。
• Pinia 更加简洁和灵活，它允许开发者直接修改状态，去除了mutations，actions相当于组件中的method，可以是同步或异步操作。

3.TypeScript支持

• Vuex 需要通过额外的插件和配置来实现类型检查。
• Pinia 提供了原生的 TypeScript 支持，在类型推导和类型检查上表现更佳。

4.适用场景

• Vuex 更适用于大型、复杂的 Vue 项目。
• Pinia 更时候小型或中等规模的 Vue 项目。

好了，分享结束，谢谢点赞，下期再见。