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

栏目: JavaScript · 发布时间: 5年前

内容简介:一般来说,数据分为两种方式组件本身自身持有数据内容,并不需要外部的参与的情况下,不需要外部数据。但是在一般来说,使用外部数据比较常见。 prop与父级紧密相关使用inject注入时,无法有效追踪层级时,查找内容提供者容易出错,通常不建议跨多个层级使用

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

  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;
}
复制代码
  1. 引用装饰器方式,这种方式适合多个需要引用时简化书写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 ...
   }
}
复制代码

以上所述就是小编给大家介绍的《如何使用 vue + typescript 编写页面 ( vuex装饰器部分 )》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

互联网思维独孤九剑

互联网思维独孤九剑

赵大伟 / 机械工业出版社 / 2014-3-20 / 49

《互联网思维独孤九剑》是国内第一部系统阐述互联网思维的著作,用9大互联网思维:用户思维、简约思维、极致思维、迭代思维、流量思维、社会化思维、大数据思维、平台思维、跨界思维,以专业的视角全方位解读移动互联网给传统产业带来的变革,涉及战略规划、商业模式设计、品牌建设、产品研发、营销推广、组织转型、文化变革等企业经营价值链条的各个方面。这是一部传统企业互联网转型必读的“孙子兵法”,帮助我们开启对新商业文......一起来看看 《互联网思维独孤九剑》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具