持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

阅读这篇文章将学习到： vuex-module-decorators + vuex-class的用法以及注意事项

前面我们讲过了vue-class-component与vue-property-decorator，为了搭配vue-class-component进行状态管理，我们选择了vuex-module-decorators + vuex-class，下面我们来介绍他们的用法，以及开发过程中遇到的坑

@Module

当我们的项目越来越大，vuex的state越来越多的时候就需要使用modules去按照模块划分state；这个时候@Module就派上用场了，它可以定义namespace

@Module({name:'user'})
export default class UserModule extends VuexModule{}

数据持久化，当我们需要把数据永久存储到本地存储然后联动地从vuex中存取时，我们可以直接使用@Module

@Module({preserverState:localStorage.getItem('login')})
export default class UserModule extends VuexModule{}

模块再利用，当我们在SSR中，会有两套store，一套是服务端store，一套是客户端store，我们需要从全局变量中取到服务端的store同步到客户端；设置stateFactory为true的话就不会重复去new 这个class了

@Mutation @Action @MutationAction

如果单纯是修改state，我们可以使用@Mutation

如果需要调用异步方法，我们就需要使用@Action

如果我们调用接口之后需要修改state，那么就可以直接使用@MutationAction

让人特别崩溃的是：这几个方法中的this都不一样，接下来我们仔细研究研究

Mutation装饰的方法中的this指向当前类的实例，可以直接访问到state，但仅仅只能访问本模块的state

Action的this可以访问到当前上下文，this.context相当于this.$store，如果要访问根下面的state使用this.rootState

@MutationAction与@Action相同

接下来看看案例

@Module({name:'user'})
export default class UserModule extends VuexModule{
    name = 'jack'
    @Mutation
    change_name(name){
        this.name = name
    }
    
    @Action
    fetch_friends(){
        fetch("/api/myFriends").then(res=>{
            console.log(res.json())
        })
    }
    
    @MutationAction({mutate:['name']})
     async fetch_friends(){
      const res =  await  fetch("/api/myFriends")
      return {name:res.json()}
    }
}

需要注意的是mutate里面必须指定所有需要修改的state的key，返回值必须返回，否则直接会报错；MutationAction这个函数必须有返回值，有时候为了处理错误我们可能会这样写：

try{
    fetch("xxx")
} catch(e){
    throw e
}

这种写法是不支持的，即使进了错误也需要给一个返回值

另外一个需要注意的点是：在vuex类里面我们不需要去声明state的类型，因为在vue组件中是无法推断出state的类型的

总结：经过三篇文章的学习，我们已经掌握了vue类组件的完整写法；将vue类组件和ts搭配起来使用将会让我们的项目的逻辑性更加严谨；

你可能不知道vue还能这样写（三）

前言

@Module

@Mutation @Action @MutationAction