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

简单了解一下vuex

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

什么时候须要vuex

通常来讲，数据分为两种方式

1. 自有数据，即组件自己持有数据，表现即 data部分
2. 外部数据，可由prop标签属性，inject父级注入，vuex提供。

组件自己自身持有数据内容，并不须要外部的参与的状况下，不须要外部数据。可是在通常来讲，使用外部数据比较常见。 prop与父级紧密相关

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

使用vuex好处

1. 统一数据来源，方便查找 对标Provide/Inject
2. 方便数据共享，对标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的两种使用方式

1. 直接装饰器方式，能够简单使用

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

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

const TestModule = namespace("test")

@Component
class MyComponent extends Vue{
    @TestModule.State foo!: string;
}
复制代码

2. @State 状态映射

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

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

• 获取计算后的state

state映射到组件时，是放在computed下的，所以自己为计算属性。

@Component
class 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

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

3. @Getter 计算属性

和State相似，可是不支持再次计算。

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

4. @Action 异步计算库

书写方式和Getter相似

@Component
class 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
    }
}
复制代码

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

5. @Mutation 同步计算库

书写方式和Action相似

@Component
class MyComponent extends Vue{
   @Action("test/setFoo") setFoo!: Function;
}

复制代码

可是mutation会当即返回结果，所以异步请求应该放在action中

更多内容 ：vuex能够参照这里，vuex装饰器具体可参照 vuex-class

上一章：如何使用 vue + typescript 编写页面 ( 基础装饰器部分 )