vuex在ts上报错:Type ‘(state: any, title: any, iconUrl: any) => void‘ is not assignable to type ‘Mutation

一个模块里的vuex文件:storeValue.ts.

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

type State = {
  currentTitle: string
  icon: string
}

const store = createStore<State>({
  state: {
    currentTitle: '首页标题',
    icon: '../../../public/titleIcon.png' // 这里是首页的默认icon
  },
  // 在mutations中定义更改state中值的方法
  mutations: {
    updateTitle(state: any, title: string, iconUrl: string ){
      state.currentTitle = title
      state.icon = iconUrl
      console.log('进入updateTitle;');
    }
  }
  
})
const key: InjectionKey<Store<State>> = Symbol()
// 定义自己的 `useStore` 组合式函数
function useStore() {
  return baseUseStore(key)
}
export { store as default, key, useStore }

组件内使用它:

// xxx.vue
export default {
	name: 'xxx',
	data() {
		return {
			currentClass: 'xxx',
			markets: [	
			]
		}
	},
	methods: {
	// 提交commit修改vuex的store中的state
		handleTitle() {
			this.$store.commit('updateTitle', '修改后的大标题')
		}
	},
	// created中调用commit事件修改store
	created: {
		this.handleTitle();
	}

不是ts的问题,而是vuex的问题。
vuex中,使用mutations定义方法的是时候,第一个参数是state,第二个参数是传入的参数。没有第三个参数,如果有多个参数可以使用对象形式传入第二个参数。
像这样:

修改前:

 mutations: {
    updateTitle(state: any, title: string, iconUrl: string ){
      state.currentTitle = title
      state.icon = iconUrl
      console.log('进入updateTitle;');
    }
  }

修改后:

mutations: {
    updateTitle(state: any, {title, iconUrl} ){
      state.currentTitle = title
      state.icon = iconUrl
      console.log('进入updateTitle;');
    }

解决报错。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值