vue 項目引入TypeScript 後,之前vuex的寫法需要修改了。在代碼編譯階段,會提示你vuex出現了問題。
按照下面的樣例編寫,可將vuex 儘快與TypeScript 相融合。
1、目錄結構
2、app.ts
import { Commit } from 'vuex';
export interface State {
details: object
}
const state: State = {
details:{}
}
const mutations = {
ADD_DETAILS: (state: State,details: object) => {
state.details = details;
},
REMOVE_DETAILS: (state: State) => {
state.details = {}
}
}
const actions = {
addDetails(context: {state: State, commit: Commit }, details: object ){
context.commit('ADD_DETAILS', details);
},
removeDetails(context: {state: State, commit: Commit } ){
context.commit('REMOVE_DETAILS');
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
3、getters.ts
const getters = {
details: (state: any) => state.app.details
}
export default getters
4、index.ts
import Vue from "vue";
import Vuex from "vuex";
import app from './modules/app'
import getters from './getters'
Vue.use(Vuex);
export default new Vuex.Store({
getters,
modules: {
app
}
});