如何使用 vue + typescript 编写页面 ( vuex装饰器部分 )-白红宇

简单了解一下vuex

是vue提供的一款store，用来存储页面共享数据

何时需要vuex

一般来说，数据分为两种方式

自有数据，即组件本身持有数据，表现即 data部分

外部数据，可由prop标签属性，inject父级注入，vuex提供。

组件本身自身持有数据内容，并不需要外部的参与的情况下，不需要外部数据。但是在一般来说，使用外部数据比较常见。 prop与父级紧密相关

使用inject注入时，无法有效追踪层级时，查找内容提供者容易出错，通常不建议跨多个层级使用

使用vuex好处

统一数据来源，方便查找对标Provide/Inject

方便数据共享，对标Prop 子-父传递数据

不方便的地方

暂时还没有发现，发现了再补充

使用vuex要考虑的地方

使用vuex的目的就是提高数据的复用性，但是不可以盲目使用vuex。

和组件自生无关的数据，可以放在store里。

在不同页面需要引用相同数据时，需要放在store里，以减少网络请求的次数。

单纯的父子传递数据，不一定要放在store里

基础内容

开打demo的store.ts 文件作为参照

export default new Vuex.Store({  state: { /* 状态库 */ },  mutations: { /* 同步计算库 使用commit触发 */ },  actions: { /* 异步计算库 使用dispatch触发 */ },  getters: { /* 计算属性  */ },  modules: { /* 分模块 */    test: {      namespaced: true, /* 开启module模式 */      state: {        foo: "this is foo"      },      getters: {        getFoo(state) {           return state.foo;        }      },      mutations: {        setFoo(state, foo) {          state.foo = foo;        }      },      actions: {        setFoo({ commit }, foo) {          setTimeout(() => {            commit('setFoo',foo)          }, 1e3);        }      }    }  }})复制代码

认识vuex的装饰器 `vuex-class`

import {  State,  Getter,  Action,  Mutation,  namespace} from 'vuex-class'复制代码

1. @namespace 命名空间

在我们开启module模式的时候，从模块下映射需要使用到namespace

除State外，其余可以行内书写方式直接引用，不需要引入 namespace

namespace的两种使用方式

直接装饰器方式，可以简单使用

@Componentclass MyComponent extends Vue{    @namespace('test').State foo!: string;}复制代码

引用装饰器方式，这种方式适合多个需要引用时简化书写namespace

const TestModule = namespace("test")@Componentclass MyComponent extends Vue{    @TestModule.State foo!: string;}复制代码

2. @State 状态映射

直接映射 @State foo 和 @State("foo") foo 相同

@Componentclass MyComponent extends Vue{    @namespace('test').State foo!: string;}复制代码

获取计算后的state

state映射到组件时，是放在computed下的，因此本身为计算属性。

@Componentclass MyComponent extends Vue{    /* 只从 state 获取*/    @namespace('test').State(state=>state.foo) foo!: string;    /*从state和getters上获取*/    @namespace('test').State((state,getters)=>state.foo+'getter:'+getters.getFoo) svsgfoo!: string;}复制代码

内部使用namespace 如果不想在外部使用namespace，可以使用参数传递namespace

@Componentclass MyComponent extends Vue{    @State("foo",{
   namespace:"test"}) foo!: string;}复制代码

3. @Getter 计算属性

和State类似，但是不支持再次计算。

@Componentclass MyComponent extends Vue{   @Getter("test/getFoo") namefoo!:string;   @Getter("getFoo",{
   namespace:"test"}) foo!:string;   @namespace("test").Getter getFoo!:string;}复制代码

4. @Action 异步计算库

书写方式和Getter类似

@Componentclass MyComponent extends Vue{   @Action("test/setFoo") setFoo!: Function;}复制代码

action可以配合promise + async/await 一同使用

actions:{    async queryState({commit},token){        let result = await Axios.get("url",{
   data:{ token }})        commit('state',result.data)        return result.data    }}复制代码

@Componentclass MyComponent extends Vue{   private token:string="best";   @Action queryState!: Function;      async onQueryStateClick(){       let data = await this.queryState(this.token)       // todo ...   }}复制代码

5. @Mutation 同步计算库

书写方式和Action类似

@Componentclass MyComponent extends Vue{   @Action("test/setFoo") setFoo!: Function;}复制代码

但是mutation会立即返回结果，因此异步请求应该放在action中

更多内容：vuex，vuex装饰器具体可参照