Vuex模块化与持久化深入讲解

1. 什么是Vuex模块化和持久化？

Vuex是一个专为Vue.js设计的状态管理库，它通过集中式存储管理应用的所有组件的状态，方便实现复杂组件间的数据共享。其中，Vuex模块化指的是将一些具有复杂业务逻辑或多个子模块组成的Vuex store分成多个小模块，以增加代码可维护性和复用性。Vuex持久化指的是通过存储到localStorage、sessionStorage或cookie等本地存储中，实现在页面刷新后状态仍然保持不变。

2. Vuex模块化实现示例

假如我们使用Vuex来实现一个购物车的应用，通常会涉及到商品列表、加入购物车、从购物车删除商品、清空购物车等多个功能。这时，我们可以将这些功能拆分成不同的子模块，如下：

// store/modules/cart.js

const state = {
  cartItems: [] // 购物车商品列表
}

const mutations = {
  ADD_ITEM(state, item) {
    state.cartItems.push(item)
  },
  REMOVE_ITEM(state, id) {
    state.cartItems = state.cartItems.filter(item => item.id !== id)
  },
  CLEAR_CART(state) {
    state.cartItems = []
  }
}

const actions = {
  addItem({ commit }, item) {
    commit('ADD_ITEM', item)
  },
  removeItem({ commit }, id) {
    commit('REMOVE_ITEM', id)
  },
  clearCart({ commit }) {
    commit('CLEAR_CART')
  }
}

const getters = {
  cartItemNum: state => state.cartItems.reduce((total, item) => total + item.num, 0)
}

export default {
  state,
  mutations,
  actions,
  getters
}

// store/modules/products.js

const state = {
  products: [] // 商品列表
}

const mutations = {
  SET_PRODUCTS(state, products) {
    state.products = products
  }
}

const actions = {
  getProducts({ commit }) {
    // ajax异步获取商品列表
    commit('SET_PRODUCTS', products)
  }
}

export default {
  state,
  mutations,
  actions
}

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
import products from './modules/products'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    cart,
    products
  }
})

可以看到，通过将购物车和商品列表拆分为两个子模块，我们可以在Vuex store的模块管理下灵活组织各个业务模块的代码。

3. Vuex持久化实现示例

假设我们在前面购物车示例基础上，想让用户关闭页面后再次打开时，购物车商品数量和选购的商品信息仍然保存。我们可以通过localStrorage来实现：

// store/modules/cart.js

const state = {
  cartItems: localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : []
}

const mutations = {
  ADD_ITEM(state, item) {
    state.cartItems.push(item)
    localStorage.setItem('cartItems', JSON.stringify(state.cartItems))
  },
  REMOVE_ITEM(state, id) {
    state.cartItems = state.cartItems.filter(item => item.id !== id)
    localStorage.setItem('cartItems', JSON.stringify(state.cartItems))
  },
  CLEAR_CART(state) {
    state.cartItems = []
    localStorage.removeItem('cartItems')
  }
}

const getters = {
  cartItemNum: state => state.cartItems.reduce((total, item) => total + item.num, 0)
}

这里，我们在mutation中添加对localStorage的操作，进而实现了购物车数据的持久化。

4. 总结

VueX的模块化和持久化都能够提高开发效率。通过Vuex的模块化，同一模块下的逻辑和数据可以更好地组织；通过持久化，能够避免页面刷新后数据丢失的现象。以上仅是Vuex模块化和持久化的简单示例，读者可根据需要进行扩展，使得Vuex的应用更加完善。