Vue2 中的 Vuex

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

// 注册 Vuex
Vue.use(Vuex)

// 定义 Store
const store = new Vuex.Store({
  // 1. 状态数据
  state: {
    // 用户信息
    userInfo: {
      name: '',
      token: ''
    },
    // 购物车列表
    cartList: []
  },

  // 2. 计算属性
  getters: {
    // 计算购物车商品总数
    cartTotalCount: state => {
      return state.cartList.reduce((total, item) => total + item.quantity, 0)
    },
    // 过滤已选中的购物车商品
    selectedCartItems: state => {
      return state.cartList.filter(item => item.checked)
    }
  },

  // 3. 同步修改状态
  mutations: {
    // 设置用户信息
    SET_USER_INFO(state, payload) {
      state.userInfo = { ...state.userInfo, ...payload }
    },
    // 添加商品到购物车
    ADD_TO_CART(state, goods) {
      // 先判断商品是否已存在
      const existItem = state.cartList.find(item => item.id === goods.id)
      if (existItem) {
        existItem.quantity += 1
      } else {
        state.cartList.push({ ...goods, quantity: 1, checked: true })
      }
    },
    // 清空购物车
    CLEAR_CART(state) {
      state.cartList = []
    }
  },

  // 4. 异步操作
  actions: {
    // 异步获取用户信息（模拟接口请求）
    async fetchUserInfo({ commit }, userId) {
      try {
        // 模拟接口请求
        const res = await new Promise(resolve => {
          setTimeout(() => {
            resolve({
              name: '张三',
              token: 'abc123456'
            })
          }, 1000)
        })
        // 提交 Mutation 修改状态
        commit('SET_USER_INFO', res)
        return res
      } catch (error) {
        console.error('获取用户信息失败：', error)
        throw error
      }
    },
    // 异步清空购物车（模拟接口+修改状态）
    async clearCart({ commit }) {
      try {
        // 模拟调用清空购物车接口
        await new Promise(resolve => setTimeout(resolve, 500))
        // 提交 Mutation
        commit('CLEAR_CART')
      } catch (error) {
        console.error('清空购物车失败：', error)
      }
    }
  }
})

export default store

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入 Store

new Vue({
  el: '#app',
  store, // 挂载到Vue实例
  render: h => h(App)
})

// src/store/modules/user.js
export default {
  namespaced: true, // 开启命名空间，避免模块间命名冲突
  state: {
    userInfo: { name: '', token: '' }
  },
  getters: {
    isLogin: state => !!state.userInfo.token
  },
  mutations: {
    SET_USER_INFO(state, payload) {
      state.userInfo = { ...state.userInfo, ...payload }
    }
  },
  actions: {
    async fetchUserInfo({ commit }, userId) {
      const res = await new Promise(resolve => {
        setTimeout(() => resolve({ name: '张三', token: 'abc123' }), 1000)
      })
      commit('SET_USER_INFO', res)
    }
  }
}

// src/store/modules/cart.js
export default {
  namespaced: true,
  state: {
    cartList: []
  },
  getters: {
    cartTotalCount: state => state.cartList.reduce((t, i) => t + i.quantity, 0)
  },
  mutations: {
    ADD_TO_CART(state, goods) {
      const exist = state.cartList.find(i => i.id === goods.id)
      exist ? exist.quantity++ : state.cartList.push({ ...goods, quantity: 1 })
    }
  },
  actions: {
    async clearCart({ commit }) {
      await new Promise(resolve => setTimeout(resolve, 500))
      commit('CLEAR_CART')
    }
  }
}

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import cart from './modules/cart'

Vue.use(Vuex)

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

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 仅开发环境开启
  // ...其他配置
})

// src/store/index.js
import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...其他配置
  plugins: [
    createPersistedState({
      key: 'vue2-vuex-demo', // 本地存储的key
      paths: ['user.userInfo', 'cart.cartList'] // 需要持久化的状态路径
    })
  ]
})

// 模块中的 Getter
getters: {
  // rootState 访问根状态，rootGetters 访问根 Getter
  cartTotalPrice: (state, getters, rootState, rootGetters) => {
    return state.cartList.reduce((t, i) => t + i.price * i.quantity, 0)
  }
}

// 模块中的 Action
actions: {
  async updateCart({ commit, rootState }) {
    // 访问根状态的 user 信息
    const token = rootState.user.userInfo.token
    await api.updateCart(token, state.cartList)
  }
}

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('cart')

export default {
  computed: {
    ...mapState(['cartList'])
  },
  methods: {
    ...mapActions(['addToCart'])
  }
}