mapgetters直接获取getters方法
mapactions直接获取actions方法
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//共享变量
const state={
count:0
}
//直接操作共享变量的对象
const mutations={
mulincrease(state){
//自增1
state.count++;
}
}
//操作mulations的对象
const actions={
//自增传入对象,然后调用
actincrease({commit}){//传多个对象用{}
commit('mulincrease');
},
//异步自增
asyncincrease({commit}){
setTimeout(()=>{
commit('mulincrease')
},2000)
}
}
//如果要对共享变量计算,则使用getters,18以下未成年,18岁以上成年了
const getters={
//是否成年
isAdult(){
return state.count>18?'成年':'未成年'
}
}
//将store.js中的对象暴露外界,用于其他组件的共享
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
App.vue
<template>
<div id="app">
{{$store.state.count}}
<!-- <button @click="countinc">同步+</button>
<button @click="countincAsync">异步+</button> -->
<button @click="actincrease">同步+</button>
<button @click="asyncincrease">异步+</button>
是否成年:{{$store.getters.isAdult}}
<!-- 是否成年:{{VueisAdult}} -->
是否成年:{{isAdult}}
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
// methods:{
// countinc(){
// //store是一个全局对象,在方法内要用this来拿
// this.$store.dispatch('actincrease')
// },
// countincAsync(){
// //store是一个全局对象,在方法内要用this来拿
// this.$store.dispatch('asyncincrease')
// }
// },
methods:mapActions(
['actincrease', 'asyncincrease']
),
// computed:{
// VueisAdult(){
// return this.$store.getters.isAdult
// }
// },
computed:mapGetters({
isAdult:'isAdult'//
})
}
</script>
<style lang="scss">
</style>