A Vuex-like state management library for Tina.js based Wechat-Mini-Program
npm i --save @tinajs/tinax
Core concepts in Tinax are the same as Vuex:
We recommend you to learn about these concepts from Vuex's document first.
Each Tinax instance is made up of one or multiple modules.
Creating a new tinax (main store) instance:
import Tinax from '@tinajs/tinax'
import users from './modules/users'
export const tinax = new Tinax({
modules: {
users,
},
})
Each Module is made up of state (actually the initial value), getters, actions and mutations.
Examples:
import { fetchUser } from '../../api'
const TYPES = {
SET_USER: 'SET_USER',
}
const initialState = {}
const getters = {
me (state) {
return state.me
},
}
const actions = {
fetchUser ({ commit, state }, { id }) {
return fetchUser(id)
.then((user) => commit(TYPES.SET_USER, { id, user }))
},
}
const mutations = {
[TYPES.SET_USER] (state, { id, user }) {
return {
...state,
[id]: user,
}
},
}
export default {
state: initialState,
getters,
actions,
mutations,
}
Unlikes Vuex, the mutation in Tinax should be a pure function, which means you should return the newer state but not alter it directly in the mutation function.
Tinax is designed to work well with the Mixin system of Tina.
Examples:
<template>
<view class="user-view">
<view wx:if="{{ user }}">
<view class="title">UserId: {{ user.id }}</view>
</view>
<view wx:elif="{{ user === false }}">
<view class="title">User not found.</view>
</view>
<view class="title">Current UserId: {{ me.id }}</view>
</view>
</template>
<script>
import { Page } from '@tinajs/tina'
import { tinax } from '../store'
Page.define({
mixins: [
tinax.connect({
state: function mappingState (state) {
return {
user: state.users[this.$route.query.id] || {},
}
},
getters: function mappingGetters (getters) {
return {
me: getters.me(),
}
},
actions: function mappingActions (actions) {
return {
fetchUser: actions.fetchUser,
}
},
}),
],
onLoad () {
this.fetchUser({ id: this.$route.query.id })
},
})
</script>
Likes Vuex, Tinax doesn't restrict your application structure.
However, we still provide you with a suggested example here :
├── app.mina
├── components
│ ├── logo.mina
│ └── ...
├── pages
│ ├── home.mina
│ └── ...
├── services
│ ├── user.js
│ └── ...
└── store
├── index.js
├── modules
│ ├── items.js
│ ├── lists.js
│ └── users.js
└── types.js
MIT © yelo, 2017 - present
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。