vuex是什么以及他的优缺点

2024-06-25 21:22:01

什么是vuex

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

每一个 Vuex 应用的核心就是 store（仓库）。
“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。
当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

例如创建一个最简单的store,提供初始的state对象和mutation:

const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}}
})

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

store.commit('increment')
console.log(store.state.count) // -> 1

优点是：

能够在vuex中,集中管理共享的数据,易于开发和后期维护
能够高效地实现组件之间的数据共享,提高开发效率
存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步

缺点是：

刷新浏览器，vuex中的state会重新变为初始状态
解决方案使用插件 vuex-along ,vuex-persistedstate

插件下载地址：https://github.com/robinvdvleuten/vuex-persistedstate

vuex是什么以及他的优缺点相关推荐

Vue性能优化：如何实现延迟加载和代码拆分？
移动优先方法已经成为一种标准,但不确定的网络条件导致应用程序快速加载变得越来越困难.在本系列文章中,我将深入探讨我们在Storefront应用程序中所使用的Vue性能优化技术,你们也可以在自己的Vue ...
ideal如何快速导入import_Vue性能优化：如何实现延迟加载和代码拆分？
作者|Filip Rakowski 译者|薛命灯移动优先方法已经成为一种标准,但不确定的网络条件导致应用程序快速加载变得越来越困难.在本系列文章中,我将深入探讨我们在 Storefront 应用程序 ...
pinia和vuex的区别
文章目录介绍安装 pinia安装 vuex安装创建 pinia创建 vuex创建两者写法对比 pinia在vue3中的写法和用法 vuex在vue3中的写法和用法 Vuex 和 Pinia 的 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
Vue.js + Vuex + TypeScript 实战项目开发与项目优化
技术栈: Vue.js + Vuex + TypeScript Todo List: 使用Vue CLI初始化项目调整初始目录结构删除初始化的默认文件(对于我们项目是多余的组件components ...
Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？
目录一.简介二.入门 1.安装 2.何为 Store ? 3.何时使用 Store ? 三.基本使用 1.Store 2.State 定义 state 获取 state 重置 state 更换 s ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
《Vue》聊一聊实际项目中前端的几种皮肤实现和优缺点
前言在现代大前端领域中,换肤功能已经逐渐成为几乎所有应用的标配,尤其是暗夜模式被推广之后,皮肤功能就正式走到了大众的视野,同样,在web领域尤其是后台管理系统中皮肤功能也由此几乎成为了标配,恰好最近 ...
MySQL 学习笔记（5）— 视图优缺点、创建视图、修改视图、删除视图
1. 视图概念简单来说,视图就是一个预定义的查询语句.视图在许多情况下可以当作表来使用,因此也被称为虚拟表(Virtual Table). 视图与表最大的区别在于它不包含数据,数据库中只存储视图的定 ...

最新文章

热门文章