vuex-maps

vuex-maps

npm、github

最實用的 vuex 庫。

The most useful vuex library.

Install

npm i vuex-maps

or

yarn add vuex-maps

Examples

• Simple

  • 

• Multiple modules

  • 

• Complex application

  • 

• Refresh save

  • 

• Store anywhere

  • 

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)
  }