@tinajs/tina-immutable

tina-immutable

Immutable data for Tina.js

Setup

1. Download package from npm

# ensure immutable is installed
npm i -save immutable@^4.0.0-rc.9

# install tina-immutable
npm i --save @tinajs/tina-immutable

2. Install into Tina

// app.js
import Tina from '@tinajs/tina'
import ImmutablePlugin from '@tinajs/tina-immutable'

Tina.use(ImmutablePlugin)

Usage

// pages/some-page.js
import { Page } from '@tinajs/tina'
import { fromJS, Map } from 'immutable'

Page.define({
  data: {
    // The default values of data could be Immutable-Objects,
    books: fromJS([
      { id: 1, title: 'Black Beauty' },
      { id: 2, title: '20,000 Leagues Under the Sea' },
    ]),
    // or just any plain types.
    messages: [{
      { id: 1, content: 'I thought you might sway closer each day' },
      { id: 2, content: 'All I wish I could say but you shy away.' },
    }],
    isLoading: false,
    title: 'Favorites',
  },

  methods: {
    more () {
      let messages = this.data.get('messages')
      this.setData({
        messages: this.data.get('messages').push(new Map({
          id: 3,
          content: 'Our eyes engage but I can\'t see who\'s nearer.',
        }))
      })
    },
  },
})

// components/like.js
import { Component } from '@tinajs/tina'
import { fromJS, Map } from 'immutable'

Component.define({
  properties: {
    // Limited by the offical Mina framkework, properties only accepts [plain types](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/component.html).
    // However, our tina-immutable plugin will transform the values of all properties to Immutable, before they are merged into ``this.data``.
    item: Object,
  },
  data: {
    like: true,
  },

  methods: {
    toggle () {
      // You can use the properties as Immutable by accessing ``this.data``.
      this.triggerEvent('toggle', { item: this.data.get('item') })
    },
  },
})

Example

• Basic
• Using with Redux

License

MIT © yelo, 2017 - present