第11课: 状态管理

Vuex/Pinia详解

课程内容

本课程将详细介绍UniApp中的状态管理方案，包括Vuex和Pinia的使用方法和最佳实践。

核心概念

• 理解状态管理的基本原理
• 掌握Vuex的使用方法
• 掌握Pinia的使用方法
• 学习状态管理的最佳实践

Vuex使用详解

1. Vuex基础结构

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    userInfo: null
  },
  mutations: {
    increment(state) {
      state.count++
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    async fetchUserInfo({ commit }) {
      // 模拟API请求
      const userInfo = await new Promise(resolve => {
        setTimeout(() => {
          resolve({ id: 1, name: '张三' })
        }, 1000)
      })
      commit('setUserInfo', userInfo)
    }
  },
  getters: {
    doubleCount: state => state.count * 2,
    isLoggedIn: state => !!state.userInfo
  }
})

2. 在组件中使用Vuex

// 在组件中使用
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['count', 'userInfo']),
    ...mapGetters(['doubleCount', 'isLoggedIn'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['fetchUserInfo']),
    handleClick() {
      this.increment()
      this.fetchUserInfo()
    }
  }
}

Pinia使用详解

1. Pinia基础结构

// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    userInfo: null
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    isLoggedIn: (state) => !!state.userInfo
  },
  actions: {
    increment() {
      this.count++
    },
    async fetchUserInfo() {
      // 模拟API请求
      const userInfo = await new Promise(resolve => {
        setTimeout(() => {
          resolve({ id: 1, name: '张三' })
        }, 1000)
      })
      this.userInfo = userInfo
    }
  }
})

2. 在组件中使用Pinia

// 在组件中使用
import { useCounterStore } from '@/store/counter'

export default {
  setup() {
    const counterStore = useCounterStore()

    const handleClick = () => {
      counterStore.increment()
      counterStore.fetchUserInfo()
    }

    return {
      counterStore,
      handleClick
    }
  }
}

Vuex vs Pinia对比

• Vuex：传统状态管理方案，支持Vue 2，结构更严格
• Pinia：现代状态管理方案，支持Vue 3 Composition API，语法更简洁

实践练习

总结

通过本课的学习，你应该掌握了Vuex和Pinia的基本使用方法，以及状态管理的最佳实践。在实际项目中，根据项目的Vue版本和复杂度选择合适的状态管理方案。