组合式 API

可以通过调用 useStore 函数，来在 setup 钩子函数中访问 store。

这与在组件中使用选项式 API 访问 this.$store 是等效的。

  [js]
1
2
3
4
5
6
7
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

访问 State 和 Getter

为了访问 state 和 getter，需要创建 computed 引用以保留响应性，这与在选项式 API 中创建计算属性等效。

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // 在 computed 函数中访问 state
      count: computed(() => store.state.count),

      // 在 computed 函数中访问 getter
      double: computed(() => store.getters.double)
    }
  }
}

访问 Mutation 和 Action

要使用 mutation 和 action 时，只需要在 setup 钩子函数中调用 commit 和 dispatch 函数。

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // 使用 mutation
      increment: () => store.commit('increment'),

      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

示例

查看组合式 API 案例，以便了解使用 Vuex 和 Vue 的组合式 API 的应用案例。

参考资料

https://next.vuex.vuejs.org/zh/guide/composition-api.html