你好,我是沐爸,欢迎点赞、收藏、评论和关注。
一、Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
二、Vuex 的原理
Vuex 的原理是通过集中管理应用的状态,并提供一套规则和方法来确保状态的变更是可预测、可追踪和可维护的。涉及以下几个关键概念:
- 集中式状态管理:Vuex 将所有组件的状态集中管理在一个全局的存储对象中。
- 响应式数据:Vuex 使用 Vue 的响应式系统,确保状态变更能够触发视图的更新。
- 状态变更的唯一方式:状态的变更只能通过提交
mutation
来完成,确保状态变更的可追踪和同步。 - 模块化:Vuex 允许将状态分割成模块,每个模块拥有自己的状态、
mutation
和action
。 - 异步处理:
action
用于处理异步操作,完成后通过commit
提交mutation
来变更状态。 - 热重载和时间旅行:Vuex 开发工具支持热重载和时间旅行调试,便于开发和调试。
三、为什么要使用 Vuex?
Vuex 提供了一种高效、可预测且可维护的方式来管理 Vue 应用的状态,尤其适用于大型或复杂应用。具有以下优势:
- 集中式管理状态:为 Vue 应用提供一个集中的地方来存储所有组件的状态。
- 解决组件通信问题:简化跨组件的状态共享和通信。
- 维护状态一致性:确保应用状态的一致性和可预测性。
- 提高开发效率:通过集中管理状态,提高开发和维护的效率。
- 增强可维护性:清晰的结构和规范使得代码更易于维护和扩展。
- 支持时间旅行调试:通过与 Vue Devtools 集成,支持时间旅行调试功能。
- 模块化:支持模块化管理状态,使得大型应用更易于组织。
四、Vuex 有哪几种属性?
- state:用于存储全局的状态,类似于组件中的data。
- getters:用于对state进行计算或过滤,类似于组件中的computed。
- mutations:用于修改state的值,必须是同步操作。
- actions:用于处理异步操作或批量的mutations操作,可以包含任意异步操作。
- modules:用于将store分割成模块,每个模块都有自己的state、getters、mutations、actions。
五、Vuex 中 action 和 mutation 的区别?
- Mutation:
mutation
用于直接变更 store 中的状态,必须是同步函数。- 它们是 Vuex 中修改状态的唯一方法,必须通过
commit
调用。
- Action:
action
提交的是 mutation,而不是直接变更状态。action
可以包含任意异步操作。
六、为什么 Vuex 的 mutation 中不能做异步操作?
主要原因是为了确保状态的变更是可预测和同步的:
- 可预测性:同步操作使得状态变更的流程清晰且可预测,便于开发者理解和追踪状态变化,同时也方便调试。
- 同步性:异步操作可能导致状态在不同时间点被多次修改,这会使得状态变更的顺序变得复杂和难以控制。
七、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 项目。
好了,分享结束,谢谢点赞,下期再见。