I’ve found that using structs in Vue solves several of the most immediate problems that have been bothering me.

  • Data structure reuse problems, avoid copy and paste boilerplate code.
  • Simple, fast simulation of data, and very easy to switch between normal data and simulation.
  • It is easy to set the initial value of a field without assigning it every time it is used.
  • Make the fields have type semantics so I can see what a structure is all about at a glance.
  • In one step, directly initialize a complete structure containing multiple layers of substructures.

To solve the above problems, only the most basic functions of Struct can be, temporarily not into other capabilities, otherwise the content is really a bit too much, talking

Let’s just go through the door. Please click: want to master more ability to classmates rainforesters. Making. IO/rainforest -…

Use structs in Vue

Let’s define the data structure that the component needs. Support fields with custom initial values. You can quickly switch between using analog data.

Go straight to the code for a preview.

// user.vue displays user information

/ / introducing the rainforest - js
import { wrapval, typedef, typeinit } from 'rainforest-js'
// Import already defined type descriptions that we can reuse
import { Id, Name, Sex, Birthday, Avatar } from './libtypes'

export default {
  data() {
    // Define the data structure
    const UserStruct = typedef({
      id: Id,
      name: Name,
      sex: Sex,
      birthday: Brithday,
      avatar: Avatar,
    })
    // Initializes the data structure. Fields are initialized to the initial value of the corresponding type
    return typeinit(UserStruct)

    // return typeinit(UserStruct, {
    // name: 'Amy', // do not use the initial value, directly assign value
    // })

    // Use wrapval({'@mock': true}) to toggle mock data
    // return typeinit(UserStruct, wrapval({ '@mock': true }))

    // return typeinit(UserStruct, wrapval({ '@mock': true }, {
    // name: 'Amy', // do not use simulation value, direct assignment
    // }))}},Copy the code

As shown above, there is no big difference between writing and ordinary data in the past. The reusability and semantics are greatly improved. The initial value of the field does not have to be assigned every time, and it is also very convenient to switch simulated data.

// comment.vue User comments

/ / introducing the rainforest - js
import { wrapval, typedef, typeinit, int32 } from 'rainforest-js'
// Import already defined type descriptions that we can reuse
import { Id, Name, Avatar, Text } from './libtypes'

export default {
  data() {
    const CommentStruct = typedef({
      user: typedef({
        id: Id,
        name: Name,
        avatar: Avatar,
      }),
      text: Text,
      id: Id,
      praise: int32,
    })
    return typeinit(CommentStruct, wrapval({ '@mock': true}}})),Copy the code

As you can see, we’re actually reusing the same field type, saving a lot of work, and the code is pretty nice.

A type library that can accumulate deposits

As you can see from the previous code, we defined a common type library, which allows us to reuse many types. With daily development, we can be very simple to accumulate precipitation of various types, so that when used again, it is not too convenient, good cutting.

// libtypes.js

import {
  wrapval,
  typedef,
  typeinit,
  bool,
  int32,
  float64,
  string,
} from 'rainforest-js'

// You can use any simulation framework you are familiar with
import { mock } from 'mockjs'

export const Id = typedef({
  '@type': string, // The type to be modified, so Id is the modifier type of string, still string
  '@mock': () = > mock('@id'), // Optional, if not, use the default initial value for the type
})

export const Name = typedef({
  '@type': string,
  '@mock': () = > mock('@name'})),export const Sex = typedef({
  '@type': string,
  '@mock': () = > (Math.random() > 0.5 ? 'male' : 'female'),
  '@value': () = > 'unknown'.// You can customize the default initial value of string
})

export const Birthday = typedef({
  '@type': string,
  '@mock': () = > mock('@date'),
  '@value': () = > '2000-01-02',})export const Avatar = typedef({
  '@type': string,
  '@mock': () = > mock('@image("120x120")'),
  '@value': () = > 'https://example.com/default-avatar.png',})export const Text = typedef({
  '@type': string,
  '@mock': () = > mock('@sentence(5)'})),Copy the code

conclusion

There is no big difference between writing and ordinary data in the past, which can be used quickly. Because of its strong reusability, the code may be written less and less as it accumulates, which is a little strange.

Used in the Vue Struct | creator training camp The campaign is under way…