专栏首页前端黑板报像高手一样重置Vuex的state

像高手一样重置Vuex的state

背景描述

Vuex对于管理你的Vue应用很有用,但是如果你的应用很大,同时又把所有的应用状态放到单个状态对象上则会变的低效且难以维护。这种情况下,则需要分割到多个小的modules中。

一个Vuex的module可以代表任何你应用中可独立分割的部分,例如:代表一个弹框、多步骤表单、购物车等等。

这些modules的状态肯定会随着应用的运行不时的变动,让我们以购物车为例,一个购物车会包含用户添加的商品列表,这个列表会在用户删除或者付款后被清除。

在Vuex的术语中,清空购物车意味着重置module的状态。所以如果列表有数据,我们则会使用空数组来替换它。

实际操作

还是继续我们的购物车例子,我们将module存放在modules目录下,就像这样:

store
├── index.js
└── modules
    └── cart.js

下面就是cart.js如何重置状态的代码:

const getDefaultState = () => {
  return {
    items: [],
    status: 'empty'
  }
}

// initial state
const state = getDefaultState()

const actions = {
  resetCartState ({ commit }) {
    commit('resetState')
  },
  addItem ({ state, commit }, item) { /* ... */ }
}

const mutations = {
  resetState (state) {
    Object.assign(state, getDefaultState())
  }
}

export default {
  state,
  getters: {},
  actions,
  mutations
}

代码的核心是创建一个工厂函数:getDefaultState,返回一个全新的默认状态对象。我们两个地方使用到它:初始化的时候以及重置的时候。

本文分享自微信公众号 - 前端黑板报(FeHeiBanBao)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue中methods,computed,filters,watch的总结

    methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就会自动执行。这个属性没有依赖缓存

    小小咸鱼YwY
  • Vue成员获取

    小小咸鱼YwY
  • Vue中组件

    然后由于后面的template会生成一个临时的dom,会把前面el关联的整个标签变成template中的内容

    小小咸鱼YwY
  • Vue部分编译不生效,解决Vue渲染时候会闪一下

    小小咸鱼YwY
  • Vue-CLI 项目搭建

    #第二次出现 #空格勾选,回车下一步 (*) Babel #我们在VUe中一般都用ES6语法写的,这个插件功能很强大一般都选的把ES5语法解析成ES6 ...

    小小咸鱼YwY
  • Vue中的循环以及修改差值表达式

    小小咸鱼YwY
  • Vue的使用

    h2内的标签中test就是由vue中传的msg变量的值,但是其中html标签不会被解析

    小小咸鱼YwY
  • Vue的介绍及安装和导入

    1)vue可以控制一个页面中的一个标签 2)vue可以控制一个页面 3)vue可以控制整个项目

    小小咸鱼YwY
  • Vue创建项目配置

      安装VS Code,开始vue的学习及编程,但是总是遇到各种各样的错误,控制台语法错误,格式错误。一股脑的袭来,感觉创建个项目怎么这个麻烦。这里就讲一下vu...

    小世界的野孩子
  • vue -- config index.js 配置文件详解

    小蔚

扫码关注云+社区

领取腾讯云代金券