1.0.1 • Published 10 months ago
vuex-zyr v1.0.1
vuex-zyr
Vue状态管理插件.
Installation
$ npm install vuex-zyr
Example
<body>
<div id="app">
<div>姓名： {{ $store.state.name }}</div>
<div>年龄： {{ $store.state.age }}</div>
<div>getters年龄： {{ age }}</div>
<button @click="$store.commit('changeName','李四')">改名</button>
<button @click="$store.commit('changeAge',2)">改年龄</button>
<button @click="syncChangeAge">异步改年龄</button>
</div>
<script src="./vue.main.js"></script>
<script src="../dist/index.js"></script>
<script>
Vue.use(VuexZyr)
const vm = new Vue({
el: '#app',
computed: {
age () {
return this.$store.getters.getAge
}
},
methods: {
...VuexZyr.mapActions(['syncChangeAge'])
},
store: new VuexZyr.Store({
strict: true, // 开启严格模式
namespaced: true, // 开启命名空间
showlog: true, // 显示修改日志
persisted: true, // 开启持久化，刷新数据不丢失
state: {
name: '张三',
age: 18,
list: [1, 2, 3]
},
mutations: {
changeName (state, newName) {
state.name = newName
},
changeAge (state, age) {
state.age += age
}
},
getters: {
getAge (state) {
return state.age + 10
}
},
actions: {
syncChangeAge ({ commit }) {
commit('changeAge', 10)
}
}
})
})
console.log(vm)
</script>
</body>