欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

26.Vuex在Composition API和非Composition API中结合Typescript的使用

程序员文章站 2024-03-12 17:17:35
...

Vue+TypeScript的项目中集成Vuex

首先需要在vue项目中集成TypeScript

vue add typescript

提示: 如果配置玩ts后调用this.$store有警告信息,请重启IDE(vscode),或者安装vue3的插件后重启IDE(vscode)

  1. 修改store.js为store.ts

  2. 重构store.ts中的代码

    在原来的store.js代码中需要加入官网提供的declare module

    import { ComponentCustomProperties } from 'vue'
    import { Store,createStore } from 'vuex'
    // 配置vue+ts的项目里面使用vuex
    declare module '@vue/runtime-core' {
        // declare your own store states
        interface State {
            count: number,
            // 定义你的数据类型...    
        }
    
        // provide typings for `this.$store`
        interface ComponentCustomProperties {
            $store: Store<State>
        }
    }
    

    重构后的store.ts代码:

    import { ComponentCustomProperties } from 'vue'
    import { Store,createStore } from 'vuex'
    // 配置vue+ts的项目里面使用vuex
    declare module '@vue/runtime-core' {
        // declare your own store states
        interface State {
            count: number,
            banner:string,
            msg:string,
        }
    
        // provide typings for `this.$store`
        interface ComponentCustomProperties {
            $store: Store<State>
        }
    }
    
    const store = createStore({
        state() {
            // 数据
            return {
                count: 1,
                banner: "zws",
                msg: "你好store"
            }
        },
        mutations: {
            // 方法,可以改变state里面的数据
            incCount(state:any) {
                state.count++;
            },
            setCount(state:any, num:number) {
                state.count += num;
            },
            setBanner(state:any, msg:any) {
                state.banner = "改变后的banner" + msg;
            }
        },
        getters: {
            revMsg(state:any) {
                return state.msg.split("").reverse().join("");
            },
            num(state:any) {
                return state.count + 10;
            }
        },
        actions: {
            // 主要用于执行Mutations里面的方法,异步操作放在这里
            doCount(context) {
                // 执行mutations里面的incCount方法
                context.commit("incCount");
            },
            incSetBanner({commit}, msg) {
                setTimeout(() => {
                    commit("setBanner", msg);
                }, 1000);
            },
        }
    });
    export default store;
    
  3. 非Composition API中结合TypeScript使用Vuex

    Home.vue组件

    <template>
        <h1>Home组件</h1>
        <h3>store的数据</h3>
        Vuex中的数据:count={{count}}
        <br>
        <button @click="incCount">执行vuex里面的方法--改变数量</button>
        <br>
        <button @click="setCount">执行vuex里面的方法并传值</button>
        <br>
        <br>
        Vuex中的banner:{{banner}}
        <br>
        <button @click="$store.commit('setBanner',' 添加的内容')">改变Vuex中的Banner</button>
        <br>
        Vuex中的list:
        <br>
        <ul>
            <li v-for="(item,index) in $store.state.list" :key="index">
                {{item}}
            </li>
        </ul>
        <br>
        获取Getter的数据----  {{revMsg}}---{{$store.getters.num}}
    </template>
    
    <script lang="ts">
        import {defineComponent} from "vue";
        let title:string="我是一个Home组件的title";
        export default defineComponent({
            name: "",
            data() {
                return {
                    title
                }
            },
            methods: {
                setTitle():void{
                    this.title="我是改变后的title";
                },
                incCount():void{
                    this.$store.commit("incCount");
                },
                setCount():void{
                    this.$store.commit("setCount",15);
                }
            },
            computed:{
                count():number{
                    return this.$store.state.count
                },
                banner():string{
                    return this.$store.state.banner
                },
                revMsg():string{
                    return this.$store.getters.revMsg;
                }
            }
        });
    </script>
    <style scoped>
    </style>
    
    
    
  4. 结合Composition API与TypeScript一起使用Vuex

    <template>
        <div>
            <h1>Composition API使用Vuex</h1>
            访问userStore模块里面state数据count:{{count}}
            <br>
            访问userStore模块里面state数据num:{{num}}
            <br>
            访问userStore模块里面getters的revMsg:{{revMsg}}
            <br>
            <button @click="incCount">调用userStore模块的mutations的incCount方法</button>
            <br>
            banner:{{banner}}
            <br>
            <button @click="doCount">调用userStore模块的actions的doCount方法</button>
            <br>
            <button @click="incSetBanner">调用userStore模块的actions的incSetBanner方法</button>
    
        </div>
    </template>
    
    <script lang="ts">
        import {defineComponent,computed} from "vue";
        import {useStore} from 'vuex'
        export default defineComponent({
            setup() {
                const store=useStore();
                return {
                    // 访问userStore里面的state=>count
                    count:computed(() => store.state.count),
                    banner:computed(() => store.state.banner),
                    // 访问userStore里面的getters=>num
                    num:computed(() => store.getters.num),
                    // 访问userStore里面的getters=>revMsg
                    revMsg:computed(() => store.getters.revMsg),
                    // 调用userStore里面的mutations=>incCount
                    incCount: ():void => store.commit("incCount"),
    
                    // 调用userStore里面的actions=>doCount
                    doCount:()=>store.dispatch("doCount"),
                    // 调用userStore里面的actions=>incSetBanner
                    incSetBanner:()=>store.dispatch("incSetBanner"," 传递的参数")
                }
            }
        });
    </script>
    
    <style lang="scss" scoped>
    
    </style>