云迈博客

您现在的位置是:首页 > 前端技术 > Vue > 正文

Vue

vuex 的理解,使用场景以及优缺点

Yjj2021-09-24Vue703
Vuex是一个专为Vue.js应用程序开发的状态管理模式,集中式存储管理应用的所有组件的状态。如果在一个项目开发中需要频繁使用组件传参来同步data中的值,比如用户信息、用户token,可以存储

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,集中式存储管理应用的所有组件的状态。如果在一个项目开发中需要频繁使用组件传参来同步data中的值,比如用户信息、用户token,可以存储到vuex里面统一管理。

vuex核心内容

state 方法 用于存放数据状态
mutations方法 用于对state中的成员的操作 ,比如对该数据的修改、增加、删除。同步的更改状态。
getters方法 根据之前的状态发布新的状态
actions方法 用于state成员的一些异步操作 ,由于直接在mutations方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交方法。
modules 当 Store 对象过于庞大时,可根据具体的业务需求分为多个 Module。

vuex的工作流程图

使用场景

购物车的数据共享,当前登录用户的信息,多界面共享

vuex的优点:

js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)
限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染

vuex的缺点:

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

安装:

npm install vuex-persistedstate --save
//在store下面的index.js中 引入
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
 plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
        return {
          user: val.user
        }
      }
    })
  ]
})

`

参考博客链接:https://blog.csdn.net/weixin_44705688/article/details/100153446

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~