vuex属性的使用总结：state、mutation、action、getters

一、state

作用：

存数据

定义：

state:{
	username:'admin',
    id:101
}

组件中直接使用：

<p>{{$store.state.id}}</p>

组件中借助于辅助方法使用：

<p>{{id}}</p>

...

import { mapState ) from 'vuex'

computed:{
	...mapState(['age'])
}

二、getters

作用：

计算属性

定义：

getters:{
	abc(state){
        return '计算的结果'
	}
}

组件中直接使用：

<p>{{$store.getters.abc}}</p>

组件中借助于辅助方法使用：

<p>{{ abc }}</p>

...

import { mapGetters ) from 'vuex'

computed:{
	...mapGetters(['abc'])
}

三、mutations

作用：

更新state数据的唯一途径

定义：

mutations:{
	updateId(state,val){
        state.id = val
	}
}

组件中直接使用：

<button @click="$store.commit('updateId',2001)">xxx</button>

组件中借助于辅助方法使用：

<button @click="updateId(2001)">xxx</button>

...

import { mapMutations ) from 'vuex'

methods:{
	...mapMutations(['updateId'])
}

四、actions

作用：

放异步方法

定义：

actions:{
	abc(store,val){
        setTimeout(()=>{ store.commit('updateId',val),2000})
	}
}

组件中直接使用：

<button @click="$store.dispatch('abc',2001)">xxx</button>

组件中借助于辅助方法使用：

<button @click="abc(2001)">xxx</button>

...

import { mapActions ) from 'vuex'

methods:{
	...mapActions(['abc'])
}