1.3.4 • Published 4 years ago
vuex-maps v1.3.4
vuex-maps
最實用的 vuex 庫。
The most useful vuex library.
Install
npm i vuex-maps
or
yarn add vuex-maps
Examples
Apis
use
- File: store.js
- Description: init
- params: (storeData, isForeverSave)
- example:
const store = { state: { global: 'global', }, modules: { user, }, } vuexMaps.use(store) vuexMaps.use(store, 'private') vuexMaps.use(store, 'public')
\$mounted
- File: *.vue (created | mounted)
- Description: data is loaded and rendered
- example:
async created() { await vuexMaps.$mounted() // ... } // or Vue.mixins({ methods: { watting() { return vuexMaps.$mounted() // promise } } }) async created() { await this.watting() // ... }
mixins
- File: *.vue (mixins)
- Description: get store data
- params: ({} | [])
- example:
vuexMaps.mixins('product', ['*']) vuexMaps.mixins('product', ['state', 'mutations', 'getters', 'actions']) vuexMaps.mixins('product', { state: ['*'], mutations: ['GET_PRODUCTS'], })
handler
- File: *.vue (computed)
- Description: v-model state
- params: (path)
- example:
// template // <input type="text" v-model="productName"> computed: { productName: vuexMaps.handler('product/name') }
sync
- File: *.vue (methods)
- Description: data synchronization
- params: (methodName, path, params)
- example:
// template // <input type="text" v-model="productName"> methods: { login() { vuexMaps.sync() }, callbackLogin() { // callback vuexMaps.sync('commit', 'user/logout', { id: 0, name: '', token: '', }) }, }
state
- File: *.vue/js
- Description: \$store.state
- example:
// @readonly // user.js (store) export default { state: { name: 'Frank', }, } // test.js vuexMaps.state.user.name // Frank
getters
- File: *.vue/js
- Description: \$store.getters
- example:
// @readonly // user.js (store) export default { state: { firstName: 'Jiahao', lastName: 'Wu', }, getters: { space() { return ' ' }, funllName(state, getters) { return state.firstName + getters.space + state.lastName }, }, } // test.js vuexMaps.getters.user.fullName // Jiahao Wu
setState
- File: *.vue/js
- Description: change state
- params: (path, value)
- example:
// user.js (store) export default { state: { name: 'Frank', }, } // test.js vuexMaps.state.user.name // Frank vuexMaps.setState('user/name', 'Jeff') vuexMaps.state.user.name // Jeff }
commit
- File: *.vue/js
- Description: \$store.commit
- params: (path, param)
- example:
// user.js (store) export default { state: { name: 'Frank', }, mutations: { SET_NAME(state) { state.name = 'Jeff' } } } // test.js vuexMaps.state.user.name // Frank vuexMaps.commit('user/SET_NAME', 'Jeff') vuexMaps.state.user.name // Jeff }
dispatch
- File: *.vue/js
- Description: \$store.dispatch
- params: (path, param)
- example:
// user.js (store) export default { state: { name: 'Frank', }, actions: { GET_USERNAME(state, id) { return new Promise(reslove => { fetch('/user/' + id).then(res => { reslove(res.json()) }) }) }, }, } // test.js ;async () => { const name = await vuexMaps.dispatch('user/GET_USERNAME', 6) }