Vue系列二十六：vuex-案例

1、映射 store。main.js

import Vue from 'vue'
import App from './components/App.vue'
import store from './store'

new Vue({
el: '#app',
render: h => h(App),  //渲染函数
store
})

2、状态对象。state.js

//状态对象
const state = {//初始化状态
count: 0
}

3、包含多个由action触发直接更新状态的方法的对象。mutations.js

//包含多个更新state函数的对象
const mutations = {
//增加的mutation
INCREMENT(state){
state.count++
},
//减少的mutation
DECREMENT(state){
state.count--
},
}

4、包含多个对应事件回调函数的对象。actions.js

//包含多个对应事件回调函数的对象
const actions = {
//增加的action
increment({commit}){
//提交增加的mutation
commit('INCREMENT')
},
//减少的action
decrement({commit}){
//提交减少的mutation
commit('DECREMENT')
},
//带条件的action
incrementIfOdd({commit,state}){
if(state.count%2===1){
//提交增加的mutation
commit('INCREMENT')
}
},
//异步的action
incrementAsync({commit}){
//在action中直接就可以执行异步代码
setTimeout(() => {
//提交增加的mutation
commit('INCREMENT')
},1000)
}
}

5、包含多个getter计算属性函数的对象。getters.js

//包含多个getter计算属性函数的对象
const getters = {
evenOrOdd(state){ //不需要调用，只需要读取属性值
return state.count%2===0?'偶数':'奇数'
}
}

6、vuex最核心的管理对象store。index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
state,
mutations,
actions,
getters
})

在组件中使用。

...mapActions([ '你要获取的actions名字' ])

...

<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,mapGetters,mapActions} from 'vuex'

export default {
computed:{
...mapState(['count']),//mapGetters()返回值对象：{count(){return this.$store.state['count']}}
...mapGetters({evenOrOdd: 'evenOrOdd2'}),//mapGetters()返回值对象：{evenOrOdd(){return this.$store.getters['evenOrOdd']}}
},
methods:{
...mapActions(['increment','decrement','incrementIfOdd','incrementAsync'])
}
}
</script>