vue2.6 + ts 使用vuex

安装

01：直接使用 store / index.ts的数据

store / index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import { CHANGE_SITE, ASYNC_CHANGE_COUNT, SYNC_CHANGE_COUNT } from './types'

Vue.use(Vuex)
interface modState<S extends unknown> {
  [key: string]: S
}
export interface RootData {
  site: string
}
export type RootState = RootData & unknown & modState<unknown>

type CountType = {
  count: Number
}
const changeCount = (count:number): Promise<CountType> => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        count: count *2
      })
    }, 2000)
  })
}

// 通用store
const store = new Vuex.Store<RootState>({
  state: {
    site: 'site-test',
    count: 0
  } as RootState,
  modules: {
    // [USER_MOD_PATH]: UserStore
  },
  getters: {
    getSite({ site }) {
      return site + '__'
    }
  },
  mutations: {
    [CHANGE_SITE](state, payload) {
      // console.log('change_site', state, payload)
      state.site = state.site + payload
    },
    [SYNC_CHANGE_COUNT](state, payload) {
      // console.log('change_count', state, payload)
      state.count = state.count + payload
    }
  },
  actions: {
    [ASYNC_CHANGE_COUNT]({ commit }, count: number) {
      // console.log('commit', commit, 'count', count)
      if ( count ) {
        changeCount(count).then(res=>{
          commit(SYNC_CHANGE_COUNT, res.count)
        })
      }
    }
  }
})
export default store

main.ts

import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

001：同步mutation操作vuex数据与获取getters

    <div>
      <div>同步修改 site</div>
      <div>site - {{ $store.state.site }}</div>
      <div>getSiteC - {{ getSiteC }}</div>
      <button @click="changeSite">修改site</button>
    </div>

<script lang="ts">
// 获取store的数据 01
import store from '@/store'
import { State, Mutation, Action } from 'vuex-class'
import { CHANGE_SITE} from '@/store/types'
export default class App extends Vue {
  // 获取store的数据 02
  @State('site')
  private site!: string
  @Mutation(CHANGE_SITE)
  private change_site!: (payload: string) => void

  private mounted() {
    // 获取store的数据 03
    console.log('site', this.site)
    console.log('getSite', this.$store.getters.getSite)
  }
  get getSiteC() {
    return this.$store.getters.getSite
  }
  private changeSite(): void {
    this.change_site('222')
  }
}

</script>

001：效果

002：异步action、mutation操作vuex数据

    <div>
      <div>异步修改 count</div>
      <div>count - {{ $store.state.count }}</div>
      <button @click="changeCount">修改count</button>
    </div>
<script lang="ts">
// 获取store的数据 01
import store from '@/store'
import { State, Mutation, namespace, Action } from 'vuex-class'
import {  ASYNC_CHANGE_COUNT } from '@/store/types'
export default class App extends Vue {
  @Action(ASYNC_CHANGE_COUNT)
  private async_change_count!: (payload: number) => void

  private mounted() {
  }
  private changeCount(): void {
    this.async_change_count(1)
  }
}
</script>

002：效果

02：引入其他模块

021：store / index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import { CHANGE_SITE, ASYNC_CHANGE_COUNT, SYNC_CHANGE_COUNT } from './types'

// 导入其他模块
import TestStore, {
  TEST_MOD_PATH,
  test_state,
} from './test';

Vue.use(Vuex)
interface modState<S extends unknown> {
  [key: string]: S
}
export interface RootData {
  site: string
}
export type RootState = RootData & unknown & modState<unknown>

type CountType = {
  count: Number
}
const changeCount = (count:number): Promise<CountType> => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        count: count *2
      })
    }, 2000)
  })
}

// 通用store
const store = new Vuex.Store<RootState>({
  state: {
    site: 'site-test',
    count: 0
  } as RootState,
  modules: {
    [TEST_MOD_PATH]: TestStore
  },
  getters: {
    getSite({ site }) {
      return site + '__'
    }
  },
  mutations: {
    [CHANGE_SITE](state, payload) {
      // console.log('change_site', state, payload)
      state.site = state.site + payload
    },
    [SYNC_CHANGE_COUNT](state, payload) {
      // console.log('change_count', state, payload)
      state.count = state.count + payload
    }
  },
  actions: {
    [ASYNC_CHANGE_COUNT]({ commit }, count: number) {
      // console.log('commit', commit, 'count', count)
      if ( count ) {
        changeCount(count).then(res=>{
          commit(SYNC_CHANGE_COUNT, res.count)
        })
      }
    }
  }
})
export default store

store / test.ts

import type { RootState } from '@/store'
import type { Module } from 'vuex'
import Vue from 'vue'

import { TEST_CHANGE_CHECKED } from './types'

// 模块注册路径
export const TEST_MOD_PATH = 'test'
export interface TEST {
  checked: boolean
}
export type test_state = TEST

// store配置
const TestStore: Module<test_state, RootState> = {
  state() {
    return {
      checked: false
    }
  },
  getters: {},
  mutations: {
    [TEST_CHANGE_CHECKED](state, payload: boolean) {
      state.checked = payload
    }
  },
  actions: {}
}

export default TestStore

main.ts 依旧挂载

组件内使用

    <div>
      <div>修改test模块的</div>
      <div>count - {{ $store.state.test.checked }}</div>
      <div>计算属性 - {{ getChecked }}</div>
      <button @click="changeChecked">修改checked</button>
    </div>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// 获取store的数据 01
import store from '@/store'
import { State, Mutation, namespace, Action } from 'vuex-class'
import {
  CHANGE_SITE,
  ASYNC_CHANGE_COUNT,
  TEST_CHANGE_CHECKED
} from '@/store/types'
import { TEST } from '@/store/test'

export default class App extends Vue {
  @State('test')
  private test!: TEST

  @Mutation(TEST_CHANGE_CHECKED)
  private test_change_checked!: (payload: boolean) => void

  private mounted() {
    // 获取test模块的
    console.log('test', this.test.checked)
  }
  private changeChecked(): void {
    this.test_change_checked(!this.test.checked)
  }
  get getChecked() {
    return this.test.checked
  }
}
</script>

002效果