vuex example
接着上一篇的vuex简单剖析,接下来主要来写一个简单的例子🌰,来操作一番。
<template>
<div>
<p>click {{count}} times, count is {{evenOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">increment if odd</button>
<button @click="incrementAsync">increment async</button>
</div>
</template>
<script>
import {mapState, mapActions, mapGetters} from 'vuex'
export default {
mounted () {
console.log(this.$store)
},
/*computed: {
count () {
return this.$store.state.count
},
evenOrOdd () {
return this.$store.getters.evenOrOdd
}
},*/
computed: {
...mapState(['count']),
...mapGetters(['evenOrOdd'])
// ... 扩展运算符
// mapGetters和mapState执行 返回值为对象 {evenOrOdd () {return this.$store.getters.evenOrOdd}}
// 如果名字不一致 不能使用(['']) ...mapGetters({event callback name:'getters name')
},
/*methods: {
increment () {
this.$store.dispatch('increment')
},
decrement () {
this.$store.dispatch('decrement')
},
incrementIfOdd () {
this.$store.dispatch('incrementIfOdd')
},
incrementAsync () {
this.$store.dispatch('incrementAsync')
}
}*/
methods: {
...mapActions(['increment', 'decrement', 'incrementIfOdd', 'incrementAsync'])
}
}
</script>
store
/*
vuex最核心的管理对象store
*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*
相当于data对象的状态对象
*/
const state = {
count: 0 // 指定初始化数据
}
/*
包含了n个直接更新状态的方法的对象
*/
const mutations = {
INCREMENT (state) {
state.count++
},
DECREMENT (state) {
state.count--
}
}
/*
包含了n个间接更新状态的方法的对象
*/
const actions = {
// {commit} -> 传了一个对象 ,对象解构
increment ({commit}) {
// 提交一个mutation请求
commit('INCREMENT')
},
decrement ({commit}) {
// 提交一个mutation请求
commit('DECREMENT')
},
incrementIfOdd ({commit, state}) {
if (state.count % 2 === 1) {
// 提交一个mutation请求
commit('INCREMENT')
}
},
incrementAsync ({commit}) {
setTimeout(() => {
// 提交一个mutation请求
commit('INCREMENT')
}, 1000)
}
}
/*
包含多个getter计算属性的对象
*/
const getters = {
// 不需要调用
evenOrOdd (state) { // 当读取属性值时自动调用并返回属性值
return state.count % 2 === 0 ? '偶数' : '奇数'
}
}
export default new Vuex.Store({
state, // 状态
mutations, // 包含多个更新state fn
actions, // 包含多个时间回调函数
getters // 包含多个 compute getter
})
这篇article just 记录一下