Vue3 Composition 组合式API+TypeScript使用Vuex

首先 需要一个vue3项目
如果你还在用vue2的项目 可以看一下我的文章
将vue2项目升级成vue3项目
然后我们的项目需要集成TypeScript
可以参考我的文章
vue3项目集成TypeScript

然后我们在项目终端引入vuex

npm install vuex@next --save
1

正常vue项目中 我们要在src下创建一个 store.js
但我们这个项目集成了ts 所以 我们要在 src下创建一个 store.ts

普通的vue项目 store的代码是这样

import { createStore } from "vuex";

const store = createStore({
    state() {
        return {
            count: 1
        }
    },
    mutations: {
        increment(state) {
            state.count = (state.count+1)
        },
    }
})

export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

但如果你用的是ts格式的语法 这样是会编译报错的
ts项目中

store.ts 参考代码如下

import { ComponentCustomProperties } from "vue";
import { createStore,Store } from "vuex";

declare module "@vue/runtime-core"{
    interface State {
        count: number
    }

    interface ComponentCustomProperties {
        $store: Store<State>
    }
}

const store = createStore({
    state() {
        return {
            count: 1
        }
    },
    mutations: {
        increment(state:any):void {
            state.count = (state.count+1)
        },
    }
})

export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

interface State是定义了一个State接口 里面限制 必须有一个count变量 且要是数字类型的
这里是可以往里加变量的 当然 接口加了 你实现接口的数据就必须有一样的数据 且要是一样的类型

然后我们在 main.ts中引入store.ts中的vuex
然后挂载在项目上

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')
1
2
3
4
5

然后重启项目

如果可以正常跑起来就没问题了

然后我们在组件中使用vuex

<template>
  <div>
     {{ countData }}
  div>
template>

<script lang="ts">
import {useStore} from "vuex";
import { defineComponent,ref } from 'vue';
export default defineComponent({
 setup(){
    const {state} = useStore();
    let countData = computed(():number=>{
      return state.count
    })
    return {
      countData
    }
 }
});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这里我们引入vuex的 useStore方法
在useStore中取出state对象
然后用countData变量 通过ref 响应式定义state中的count
然后返回countData 并在界面中使用
运行结果如下

没有任何问题

然后我们试着调用vuex中的方法

<template>
  <div>
     {{ countData }}
     <button @click = "onCountData">incrementbutton>
  div>
template>

<script lang="ts">
import {useStore} from "vuex";
import { defineComponent,ref,computed } from 'vue';
export default defineComponent({
 setup(){
    const {commit,state} = useStore();
    const onCountData = function():void {
        commit('increment');
    }
    let countData = computed(():number=>{
      return state.count
    })
    return {
      countData,
      onCountData
    }
 }
});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

这里 我们多拿了一个commit 这个工具里就有我们mutations中的方法
然后我们定义了onCountData函数 调用了vuex中的increment

并把他绑定给了一个按钮

运行结果如下

然后我们点击按钮 点一次vuex中的 count 就会加一

也是没有任何问题

然后我们试着做个传参的
来到store.ts 将 increment改成

increment(state:any, value:number):void {
    state.count = (state.count + value)
 },
1
2
3

这里我们就可以看到 多接受了一个叫vulue的数字类型参数
并点一次 不再是加一 而是count 和传过来的value相加
然后我们在组件中onCountData代码改成

const onCountData = function():void {
    commit('increment',33);
}
1
2
3

这里我们参数直接传了33 那点一下就是count 自身加33

点一下按钮 运行结果如下

也是没有任何问题