useStore 返回undefined
问题现象
编写demo 时,遇到 useStore 返回undefined,报错如下。 网上有很多类似提问,但是不够直白。
代码如下
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '@/store/index'
import { IAccount } from '@/api/account/types'
import { UserActionTypes } from '@/store/modules/user/type'
import { ElMessage } from 'element-plus'
export default defineComponent({
name: 'Login',
setup() {
const userInfo: IAccount = reactive({ userName: '', password: '' })
function handleLogin() {
console.log('login', userInfo)
const store = useStore()
console.log('store', store)
const router = useRouter()
const route = useRoute()
store.dispatch('user/' + UserActionTypes.LOGIN, userInfo).then(() => {
router.push({
path: (route.query.redirect as string) || '/',
query: {
...route.query,
redirect: undefined
}
})
})
}
return {
userInfo,
handleLogin
}
}
})
</script>
解决办法
useStore 不应放到 函数 handleLogin() 当中,而应放到外部,在 setup中使用