佛山网站推广建设,做购物车的网站,响应式网站建设推荐乐云践新,网络设计制作服务你好#xff0c;我是沐爸#xff0c;欢迎点赞、收藏、评论和关注。
一、Vuex 是什么#xff1f;
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。
二、Vu…你好我是沐爸欢迎点赞、收藏、评论和关注。
一、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.xstrict: true
})const store createStore({// v4.xstrict: 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 ./localStoragePluginVue.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]
})3main.js 中注入仓库
import Vue from vue
import App from ./App.vue
import { store } from ./storenew Vue({render: (h) h(App),store
}).$mount(#app)4组件中使用仓库数据 HomePage.vue
templatedivdivcount - {{ count }}/divdivdoubleCount - {{ doubleCount }}/divdivbutton clickhandleClickIncrement/button/div/div
/templatescript
import { mapState, mapGetters } from vuex
export default {computed: {...mapState([count]),...mapGetters([doubleCount])},methods: {handleClick() {this.$store.commit(increment)}}
}
/script2.使用 vuex-persistedstate 插件实现持久化数据存储。
安装插件
npm install vuex-persistedstate使用插件
import Vue from vue
import Vuex from vuex
import createPersistedState from vuex-persistedstateVue.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 ./localStoragePluginlet 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]
})3main.js 中注入仓库
import { createApp } from vue
import App from ./App.vue
import store from ./storeconst app createApp(App)
app.use(store)
app.mount(#app)4组件中使用仓库数据 HomePage.vue
templatedivdivcount - {{ count }}/divdivdoubleCount - {{ doubleCount }}/divdivbutton clickhandleClickIncrement/button/div/div
/templatescript setup
import { computed } from vue
import { useStore } from vuexconst store useStore()const count computed(() store.state.count);
const doubleCount computed(() store.getters.doubleCount);function increment() {store.commit(increment)
}
/script2.使用 vuex-persistedstate 插件实现持久化数据存储。
安装插件
npm install vuex-persistedstate使用插件
import { createStore } from vuex
import createPersistedState from vuex-persistedstateexport 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 中的状态的方法是提交mutationsmutations是同步的用于实际修改状态。actions提交的是mutations而不是直接变更状态actions可以包含任意异步操作。Pinia 更加简洁和灵活它允许开发者直接修改状态去除了mutationsactions相当于组件中的method可以是同步或异步操作。
3.TypeScript支持
Vuex 需要通过额外的插件和配置来实现类型检查。Pinia 提供了原生的 TypeScript 支持在类型推导和类型检查上表现更佳。
4.适用场景
Vuex 更适用于大型、复杂的 Vue 项目。Pinia 更时候小型或中等规模的 Vue 项目。
好了分享结束谢谢点赞下期再见。
