如何使用 vue + typescript 编写页面 ( vuex装饰器部分 )
栏目: JavaScript · 发布时间: 5年前
内容简介:一般来说,数据分为两种方式组件本身自身持有数据内容,并不需要外部的参与的情况下,不需要外部数据。但是在一般来说,使用外部数据比较常见。 prop与父级紧密相关使用inject注入时,无法有效追踪层级时,查找内容提供者容易出错,通常不建议跨多个层级使用
一般来说,数据分为两种方式
- 自有数据,即组件本身持有数据,表现即 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的两种使用方式
- 直接装饰器方式,可以简单使用
@Component class MyComponent extends Vue{ @namespace('test').State foo!: string; } 复制代码
- 引用装饰器方式,这种方式适合多个需要引用时简化书写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装饰器部分 )》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 软件技术-零基础编写响应式登录页面
- 如何使用 vue + typescript 编写页面 (Vue生命周期函数)
- 从小白进阶,三分钟教你如何编写伪静态实现网站页面响应 荐
- [译] 设计一个页面原则上应该指的是编写 HTML 和 CSS
- 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写
- vue页面跳转后返回原页面初始位置方法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Types and Programming Languages
Benjamin C. Pierce / The MIT Press / 2002-2-1 / USD 95.00
A type system is a syntactic method for automatically checking the absence of certain erroneous behaviors by classifying program phrases according to the kinds of values they compute. The study of typ......一起来看看 《Types and Programming Languages》 这本书的介绍吧!