Rewrite Vue2-twzipcode in Vuex way
this package was based on orginal repos made by knovour(vue2-twzipcode) and CasperLaiTW(vue-twzipcode)
npm install vuex-twzipcode --save
your root js file (or anywhere you put Vuex store in)
import Vue from 'vue'
import App from './App'
import twzipcode from 'vuex-twzipcode';
/* insert module and components */
Vue.use(twzipcode, { store });
/* your original store */
import store from './store'
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
The package will automatically register <twzipcode>
as global component,
you can use it like so:
<div id="app">
<twzipcode></twzipcode>
</div>
you can access them with { mapState }
from Vuex
computed: {
// access all states in the module
...mapState(['twzipcode']),
}
or
computed: {
// access single state in the module
...mapState({
county: state => state.twzipcode.county
}),
}
(this action is automatically used when county
is changed)
reset district
to the first district of current county.
this.$store.dispatch('twzipcode/resetDistrict');
setting matched county and district with given inputZipcode
this.$store.dispatch('twzipcode/setCountyAndDistrictFromZipcode', 437);
// set county to be '台中市', district to '大甲區'
type: Object
class for each input
default:
{
county: 'formControl-twzipcode',
district: 'formControl-twzipcode',
zipcode: 'formControl-twzipcode',
}
example: if you need to use your custom classes, use it like
<twzipcode
:class-names="{county: 'yourCustomClass1', district: 'yourCustomClass2', zipcode: 'yourCustomClass3'}"
>