常见问题 #

// 错误
this.$store.state.user.name = 'John'
// Error: [vuex] Do not mutate vuex store state outside mutation handlers

// 正确
this.$store.commit('SET_USER_NAME', 'John')

// 问题
this.$store.state.user.newProp = 'value'

// 方案一：在 mutation 中使用 Vue.set
mutations: {
  ADD_PROP(state, { key, value }) {
    import { set } from 'vue'
    set(state.user, key, value)
  }
}

// 方案二：替换整个对象
mutations: {
  ADD_PROP(state, { key, value }) {
    state.user = { ...state.user, [key]: value }
  }
}

// 问题
this.$store.state.items[0] = newValue

// 方案一：splice
mutations: {
  UPDATE_ITEM(state, { index, value }) {
    state.items.splice(index, 1, value)
  }
}

// 方案二：创建新数组
mutations: {
  UPDATE_ITEM(state, { index, value }) {
    state.items = state.items.map((item, i) => 
      i === index ? value : item
    )
  }
}

<!-- 问题 -->
<input v-model="$store.state.user.name" />

<template>
  <input v-model="userName" />
</template>

<script>
export default {
  computed: {
    userName: {
      get() {
        return this.$store.state.user.name
      },
      set(value) {
        this.$store.commit('SET_USER_NAME', value)
      }
    }
  }
}
</script>

// 问题
export default {
  data() {
    return {
      user: 'local'  // 与 mapState 冲突
    }
  },
  computed: {
    ...mapState(['user'])
  }
}

export default {
  data() {
    return {
      user: 'local'
    }
  },
  computed: {
    ...mapState({
      storeUser: 'user'  // 重命名
    })
  }
}

// 问题：直接访问
created() {
  this.user = this.$store.state.user
}

// 正确：使用计算属性
computed: {
  user() {
    return this.$store.state.user
  }
}

// 问题
this.$store.commit('SET_USER', user)  // 找不到

// 正确
this.$store.commit('user/SET_USER', user)

// 在模块的 getter 中
getters: {
  userCart: (state, getters, rootState) => {
    return rootState.cart.items.filter(
      item => item.userId === state.profile.id
    )
  }
}

// 在模块的 action 中
actions: {
  async checkout({ state, rootState, dispatch }) {
    await dispatch('cart/checkout', null, { root: true })
  }
}

store.registerModule('user', userModule, {
  preserveState: true  // 保留已有状态
})

// 错误
mutations: {
  FETCH_USER(state) {
    fetch('/api/user').then(user => {
      state.user = user  // 异步修改
    })
  }
}

// 正确
actions: {
  async fetchUser({ commit }) {
    const user = await fetch('/api/user')
    commit('SET_USER', user)
  }
}

// 问题
const result = this.$store.dispatch('fetchUser')
console.log(result)  // Promise

// 方案一：async/await
const user = await this.$store.dispatch('fetchUser')

// 方案二：Promise
this.$store.dispatch('fetchUser').then(user => {
  console.log(user)
})

// 问题
this.$store.dispatch('fetchUsers')
this.$store.dispatch('fetchProducts')
// 不知道何时完成

await Promise.all([
  this.$store.dispatch('fetchUsers'),
  this.$store.dispatch('fetchProducts')
])
// 两个都完成后继续

import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  plugins: [
    createPersistedState({
      paths: ['user', 'settings']
    })
  ]
})

createPersistedState({
  paths: ['user.preferences'],  // 不持久化 token
  storage: {
    getItem: key => decrypt(localStorage.getItem(key)),
    setItem: (key, value) => localStorage.setItem(key, encrypt(value))
  }
})

// 不推荐
computed: {
  ...mapState(['user'])  // 整个 user 对象
}

// 推荐
computed: {
  ...mapState({
    userName: state => state.user.name  // 只订阅 name
  })
}

// 使用函数延迟计算
getters: {
  filterItems: state => filter => {
    return state.items.filter(filter)
  }
}

// 使用时
const filtered = store.getters.filterItems({ category: 'books' })

const logger = store => {
  store.subscribe((mutation, state) => {
    console.log('Mutation:', mutation.type)
    console.log('Payload:', mutation.payload)
    console.log('New State:', state)
  })
}

const store = createStore({
  plugins: [logger]
})

// 错误：异步 mutation
mutations: {
  SET_DATA(state, data) {
    setTimeout(() => {
      state.data = data
    }, 0)
  }
}

// 正确：同步 mutation
mutations: {
  SET_DATA(state, data) {
    state.data = data
  }
}

// Vuex 3
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // ...
})

// Vuex 4
import { createStore } from 'vuex'

export default createStore({
  // ...
})

// Vuex
const store = createStore({
  state: () => ({ count: 0 }),
  mutations: {
    INCREMENT(state) { state.count++ }
  }
})

// Pinia
const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})