在组件中引用
//1.this.$store.state.xxx
//2. mapstate
computed: mapState({
xxx2: state => state.xxx// 这里引用可以设置 state中 xxx的值 为 xxx2
})
// state中多个属性
computed: {
...mapGetters(['xxx']), // 使用数组的方法直接取值
...mapState(['xxx2']),
//自定义的 计算属性
.......
}
<template>
<div>{{xxx}}<div> <div>{{xxx2}}<div> // 使用
</template>
//3.mutations 或者 actions 的方法时 ---- <无参数>
// 同理 调用mutations 或者 actions 的方法时 使用 mapActions, mapMutations
import { mapActions, mapMutations} from 'vuex'
// mapActions例子 ----(mapMutations 一样)
methods: {
...mapActions(['increment', 'decrement']),
// 自定义方法
name () {}
}
// 使用时 可以当 方法直接使用
<template>
<button @click="increment">+</button>
<button @click="decrement">----</button>
</template>
// 4.mutations 或 action 的方法有参数时
//mutations
//1.
this.$store.commit('xxx',name)
//2.
<template>
<button @click="increment">+</button>
</template>
methods: {
...mapMutations({
increment (commit) { // 点击事件的方法
commit('increment', xxx) // store的方法 xxx是参数
}
}),
// 自定义方法
name () {}
}
store 中 的 actions 同理也可以这么写