最實用的 vuex 庫。
The most useful vuex library.
npm i vuex-maps
or
yarn add vuex-maps
-
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) }