一个模块里的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;');
}
解决报错。