vue 在js 文件中使用store_vue+typescript项目 在js单文件中引入store失败?

在Vue+TypeScript项目中,作者遇到一个难题:在非Vue单文件组件的JS文件里引入Vuex Store时,打印结果显示为undefined。尽管在main.ts文件中能够成功引入并打印出Store内容。文章详细描述了问题背景,包括尝试引入的代码段,以及项目文件结构。尽管如此,问题仍然存在,即如何在JS文件正确引用并使用Vuex的Store。
摘要由CSDN通过智能技术生成

1、在项目中定义了一个对axiox进行配置的文件,其中需要引入vuex,在response的status状态不等于200的时候改变store中的值。但是一直引入store文件时,打印出来一直是undefined。mian.ts文件中也引入了store,确是可以打印出来东西的。

2、截图

文件目录

打印结果

import axios from 'axios'

import { Message } from 'element-ui'

import { getToken, setCookie, getCookie } from '@/utils/auth'

import store from '@/store/index'

console.log('store', store)

4、index.ts文件

import Vue from 'vue'

import Vuex, { StoreOptions } from 'vuex'

import { RootState } from './modules/types'

import { app } from './modules/app'

import { user } from './modules/user'

import { permission } from './modules/permission'

Vue.use(Vuex)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 + TypeScript ,将 token 放在 Vuex store 需要进行一些类型定义的操作。首先需要定义 `state` 的类型和 `mutation` 的类型: ```typescript // auth 模块 interface AuthState { token: string | null; } interface AuthMutations { setToken(state: AuthState, token: string): void; } const state: AuthState = { token: null, }; const mutations: AuthMutations = { setToken(state, token) { state.token = token; }, }; ``` 接着,定义 `action` 的类型和参数类型: ```typescript interface AuthActions { login({ commit }: { commit: Commit }, { username, password }: { username: string, password: string }): Promise<void>; logout({ commit }: { commit: Commit }): void; } const actions: AuthActions = { async login({ commit }, { username, password }) { // 发送登录请求并获取 token const token = 'xxxxx'; commit('setToken', token); }, logout({ commit }) { // 清除 token commit('setToken', null); }, }; ``` 最后,定义 `store` 的类型和模块类型: ```typescript import { createStore } from 'vuex'; interface RootState {} interface Modules { auth: { state: AuthState; mutations: AuthMutations; actions: AuthActions; }; } export default createStore<RootState>({ modules: { auth: { state, mutations, actions, }, }, }); ``` 这样,就可以在组件使用类型安全的方式来访问和操作 token 了。例如,在组件使用 `mapState` 辅助函数来将 token 映射到计算属性: ```typescript import { mapState } from 'vuex'; import { defineComponent } from 'vue'; export default defineComponent({ computed: { ...mapState('auth', ['token']), }, }); ``` 在模板,你可以直接使用 `{{ token }}` 来访问 token。在组件的方法,也可以使用类型安全的方式来调用 `auth` 模块的 action: ```typescript import { mapActions } from 'vuex'; import { defineComponent } from 'vue'; export default defineComponent({ methods: { ...mapActions('auth', ['login']), async handleLogin() { await this.login({ username: 'xxx', password: 'xxx' }); }, }, }); ``` 这样,就可以在 Vue 3 + TypeScript 应用安全地管理和使用 token 了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值