目录
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效果
