Vuex 实例对象 state 数据直接访问与修改 - 使用实例委托代理

在 Vuex 中，实例对象的 state 数据可以由实例委托代理。这意味着你可以在实例对象上直接访问和修改 state 数据，而无需通过 getter 和 mutation。

为了实现这个功能，你需要将实例对象的 state 数据设置为 Vue 的响应式属性。你可以使用 Vue 的 'reactive' 方法将 state 数据转换为响应式属性，然后将它们添加到实例对象上。

以下是一个示例代码：

import { reactive } from 'vue'
import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

const app = {
  state: reactive(store.state), // 将 state 数据转换为响应式属性
  increment() {
    store.commit('increment')
  }
}

export default app

在上面的示例中，我们使用 Vue 的 'reactive' 方法将 'store.state' 转换为响应式属性，并将其赋值给 'app.state'。然后，我们可以在 'app' 对象上直接访问和修改 'state.count'，而无需通过 getter 和 mutation。

需要注意的是，当你在实例对象上修改 state 数据时，Vue 会自动跟踪这些变化并更新相关的视图。这个特性是 Vue 的响应式系统提供的，并且在使用 Vuex 时也是适用的。