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)
-
修改store.js为store.ts
-
重构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;
-
非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>
-
结合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>
上一篇: Java中的Set、List、Map的用法与区别介绍
下一篇: k8s 安装部署报错解决方法