如何在Nuxt和@vue/复合-api中使用$store.commit

Question

<template>
  <div>
    <h1>Vuex Typescript Test</h1>
    <button @click="handleLogin">click</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  setup() {
    return {
      handleLogin() {
       // something....
      },
    }
  },
})
</script>

@vue/composition-api不应用useStore

我想在安装功能中使用存储。

Answer 1

您应该能够根据useStore访问setup函数中可组合的Vuex文件。

您的script部分将如下所示：

import { defineComponent } from '@vue/composition-api';
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    return {
      const store = useStore();

      return {
        handleLogin {
          store.dispatch('auth/login');
        },
      };
    }
  },
});

构造setup内容的正确方法是将handleLogin作为单独的const并在return中公开常量，以便使return部分更易读，如下所示：

setup() {
  const store = useStore();
  const handleLogin = () => {
    store.dispatch('auth/login');
  };

  return {
    handleLogin,
  }
}