weex-x

Weex-x

Flux-inspired-Architecture-Vuex-inspired-Architecture for Weex.

note: this repo only works well with Weex JS Framework v0.16.x and higher.

Install

npm install weex-x

Usage

First you need to create a new Store with some options.

• state: the real JSON data work in the background.
• getters: you can define some getters whose value depends on the state.
• mutations: you can not modify the state directly but can define some mutations to dispatch anytime.
• actions: you can also define some functions to dispatch those mutations.

For example:

import { Store } in 'weex-x'
const store = new Store({
  state: { firstName: 'Jinjiang', lastName: 'ZHAO' },
  getters: { fullName: state => `${state.firstName} ${state.lastName}` },
  mutations: {
    setFirstName (state, name) {
      state.firstName = name
    },
    setLastName (state, name) {
      state.lastName = name.toUpperCase()
    }
  },
  actions: {
    setFirstName: ({ commit }, payload) => commit('setFirstName', payload),
    setLastName: ({ commit }, payload) => commit('setLastName', payload),
    setFullName({ commit }, payload) {
      const result = payload.split(' ', 2)
      commit('setFirstName', result[0])
      commit('setLastName', result[1])
    }
  }
})

And then just set store to the top Vm options with the store you created and set init to each Vm options. You can access the store by $store in Vms.

import { Store, init } in 'weex-x'
const store = new Store({...})
export {
  store,
  init,
}

If your Vm already has init in its options. You can use it like this:

import { Store, init } in 'weex-x'
const store = new Store({...})
init = init(function () {
  // todo
})
export {
  store,
  init,
}

At last you can quickly define more Vm options with some helpers:

import { Store, init, mapGetters, mapActions } from 'weex-x'
const store = new Store({...})
export {
  store,
  init
}
export const computed = mapGetters([
  'firstName',
  'lastName',
  'fullName'
])
export const methods = mapActions([
  'setFirstName',
  'setLastName',
  'setFullName'
])

Examples

See examples for more.

Contribution

• npm run build to build generated javascript code to ./dist/
• npm run dev to watch the ./src/* changes to run the build process
• npm run test to run test cases
• in ./examples/ you can npm i && npm run build to build all examples to ./examples/dist/
• also in ./examples/ you can npm run dev to watch changes of all examples to run the build process