Vue2系列教程——Vuex(下)
Vue2 Vuex(下)1. getters配置项作用:当state中的数据需要经过加工后再使用时,可以使用getters加工。store文件夹中index.js,import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const actions = {}const mutations = {}const state = {sum: 0}/
·
Vue2 Vuex(下)
1. getters配置项
作用:当state中的数据需要经过加工后再使用时,可以使用getters加工。
store文件夹中index.js,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions = {}
const mutations = {}
const state = {
sum: 0
}
// getters,用于将state中的数据进行加工
const getters = {
bigSum(state){
return stats.sum + 10 // 注意这里是要return返回值的!
}
}
export default const new Vuex.Store({
actions,
mutations,
state,
getters
})
Home.vue文件中,
<template>
<div>{{ $store.getters.bigSum }}</div>
</template>
2. mapState 与 mapGetters
<template>
<!-- 方式一:对象写法 -->
<div>{{he}}</div>
<div>{{xuexiao}}</div>
<!-- 方式二:数组写法 -->
<div>{{sum}}</div>
<div>{{school}}</div>
<div>{{bigSum}}</div>
</template>
<script>
import {mapState, mapGetters} from 'vuex'
computed:{
// 方式一:对象写法,借助mapState生成计算属性,从state中读取出来,这里表示 this.$store.state.sum,this.$store.state.school
...mapState({ he:'sum', xuexiao:'school'}) // ES6语法
// 方式二:数组写法
...mapState(['sum', 'school'])
// mapGetters,这里表示 this.$store.getters.bigSum
...mapGetters(['bigSum'])
}
</script>
3. mapActions 与 mapMutations
<template>
<button @clicl="add(3)">求和</button>
<div>{{$store.state.sum}}</div>
<button @clicl="decrease(5)">相减</button>
</template>
<script>
import {mapMutations, mapActions} from 'vuex'
methods: {
// 方式一:对象写法,借助mapMutations生成对应的方法,方法中会调用commit去联系mutations,这里表示 this.$store.commit('jia',3) this.$store.commit('jian',5)
...mapMutations({add:'JIA', decrease:'JIAN'})
// 方式二:数组写法
...mapMutations(['add', 'decrease'])
// mapActions,借助mapActions生成对应的方法,方法中会调用dispatch去联系actions,这里表示 this.$store.dispatch('jia',3)
...mapActions(['decrease'])
}
</script>
- 方式一:不使用namespace的方式
- store文件夹中index.js,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 模块化,求和配置项
const countOptions = {
actions:{
jia(context, value){
context.commit('JIA', value)
}
},
mutations:{
JIA(state, value){
state.sum = value + 8
}
},
state:{
sum: 0
dec: 2
}
}
// 人员相关配置项
const personOptions = {
actions:{},
mutations:{},
state:{}
}
export default const new Vuex.Store({
modules:{
countOptions ,
personOptions
}
})
Home.vue文件中,
<template>
<div>{{countOptions.sum}}</div>
</template>
<script>
import {mapState} from 'vuex'
computed:{
...mapState(['countOptions', 'personOptions'])
}
</script>
- 方式二:使用namespace方式
store文件夹中index.js,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const countOptions = {
namespace: true, // 命名空间
actions:{
jia(context, value){
context.commit('JIA', value)
}
},
mutations:{
JIA(state, value){
state.sum = value + 8
}
},
state:{
sum: 0
dec: 2
}
}
const personOptions = {
namespace: true,
actions:{},
mutations:{},
state:{}
}
export default const new Vuex.Store({
modules:{
countOptions ,
personOptions
}
})
Home.vue文件中,
<template>
<div>{{sum}}</div>
<div>{{dec}}</div>
<button @click="add(3)">求和<button>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
computed:{
...mapState('countOptions', ['sum','dec']) // 这里的countOptions就是使用了命名空间起的作用,下面同理
...mapState('personOptions', ['',''])
sum2(){
return this.$store.state.countOptions.sum // 不简写
}
// getters的用法请看《尚硅谷》第116集
}
methods:{
...mapMutations('countOptions',{add:'JIA'})
add2(num){
this.$store.commit('countOptions/JIA', num) // 不简写,注意这里的写法mutations里的函数用“/”隔开
}
}
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)