vuex 使用 (vue2)

在组件中引用

 //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 同理也可以这么写