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

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>