Vuex的...mapstate和...mapmutations以及...mapActions的使用

一、mapState

1、常规引入

通过this.$store.state.[moudle].count引入

// user.js
export default {
  namespaced: true,
  state: {
    count: 1,
    name: 'daming'
  }
}

<template>
  <div>
    <li>count：{{ count }}</li>
    <li>name：{{ name }}</li>
    <li>helloName：{{ helloName }}</li>
    <li>addNumber：{{ addNumber }}</li>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hello: 'hello',
      number: 1,
    }
  },
  computed: {
    count () {
      return this.$store.state.user.count
    },
    name () {
      return this.$store.state.user.name
    },
    helloName: function (state) {
      return this.hello + this.$store.state.user.name
    },
    addNumber: function (state) {
      return this.number + this.$store.state.user.count
    }
  }
}
</script>

2、…mapstate：数组写法和对象写法

export default {
  namespaced: true,
  state: {
    count: 1,
    count1: 10,
    count2: 100,
    count3: 1000,
    name: 'daming'
  }
}

<template>
  <div>
    <div>{{ count }}</div>
    <div>{{ count1 }}</div>
    <div>{{ repeatCount }}</div>
    <div>{{ count3 }}</div>
    <div>{{ name }}</div>
    <div>{{ helloName }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      hello: 'hello',
      number: 1,
    }
  },
  computed: {
    // 数组写法
    // ...mapState('user', ['count', 'name']) 

    // 对象写法：相当于将变量重命名
    ...mapState('user', {
      count: 'count', // 这种就是count:"count", 的简写
      count1: "count1",
      repeatCount: "count2", // 当组件中与vuex中的字符已经出现重复时，使用 repeatCount 来映射 store.state.count2
      count3: (state) => { // 映射 count3 为 store.state.user.conut3的值
        return state.count3
      },
      helloName: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
        return this.hello + state.name
      }
    })
  }
}
</script>

二、mapMutations的使用

1、常规使用

export default {
  namespaced: true,
  state: {
    count: 1,
    count1: 10,
    count2: 100,
    name: 'daming'
  },
  mutations: {
    setcount (state) {
      state.count++
    },
    setcount1 (state, count1) {
      state.count1++
    },
    setcount2 (state, count2) {
      state.count2++
    },
    setname (state, name) {
      state.name = name
    },
  }
}

<template>
  <div>
    <button @click="setcount">{{ count }}</button>
    <button @click="setcount1">{{ count1 }}</button>
    <button @click="setcount2">{{ repeatCount }}</button>
    <button @click="setname(newName)">{{ name }}</button>
    <button @click="handle">{{ helloName }}</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      hello: 'hello',
      newName: 'newName:Tom',
      newName1: 'newName:Jack',
    }
  },
  computed: {
    ...mapState('user', {
      count: 'count',
      count1: "count1",
      repeatCount: "count2",
      name: (state) => {
        return state.name
      },
      helloName: function (state) {
        return this.hello + state.name
      }
    })
  },
  methods: {
    // user是module的子模块
    setcount () {
      this.$store.commit('user/setcount')
    },
    setcount1 () {
      this.$store.commit('user/setcount1')
    },
    setcount2 () {
      this.$store.commit('user/setcount2')
    },
    setname (newName) {
      this.$store.commit('user/setname', newName)
    },
    handle () {
      this.$store.commit('user/setname', this.newName1)
    }
  }
}
</script>

2、mapmutations：数组写法和对象写法

export default {
  namespaced: true,
  state: {
    count: 1,
    count1: 10,
    count2: 100,
    name: 'daming'
  },
  mutations: {
    setcount (state) {
      state.count++
    },
    setcount1 (state, count1) {
      state.count1++
    },
    setcount2 (state, count2) {
      state.count2++
    },
    setname (state, name) {
      state.name = name
    },
  }
}

2.1数组写法

<template>
  <div>
    <button @click="setcount">{{ count }}</button>
    <button @click="setcount1">{{ count1 }}</button>
    <button @click="setcount2">{{ repeatCount }}</button>
    <button @click="setname(newName)">{{ name }}</button>
    <button @click="handle">{{ helloName }}</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      hello: 'hello',
      newName: 'newName:Tom',
    }
  },
  computed: {
    ...mapState('user', {
      count: 'count',
      count1: "count1",
      repeatCount: "count2",
      name: (state) => {
        return state.name
      },
      helloName: function (state) {
        return this.hello + state.name
      }
    })
  },
  methods: {
    // 相当于把方法写到了methods中
    ...mapMutations('user', [
      'setcount',
      'setcount1',
      'setcount2',
      'setname',
    ]),
    handle () {
      this.setname("newName:Jack")
      console.log('名称');
    }
  }
}
</script>

2.2对象写法：相当于将原内容重命名

<template>
  <div>
    <button @click="add">{{ count }}</button>
    <button @click="add1">{{ count1 }}</button>
    <button @click="add2">{{ repeatCount }}</button>
    <button @click="namehandle(newName)">{{ name }}</button>
    <button @click="handle">{{ helloName }}</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      hello: 'hello',
      newName: 'newName:Tom',
    }
  },
  computed: {
    ...mapState('user', {
      count: 'count',
      count1: "count1",
      repeatCount: "count2",
      name: (state) => {
        return state.name
      },
      helloName: function (state) {
        return this.hello + state.name
      }
    })
  },
  methods: {
    ...mapMutations('user', {
      add: 'setcount',
      add1: 'setcount1',
      add2: 'setcount2',
      namehandle: 'setname',
    }),
    handle () {
      this.namehandle("newName:Jack")
      console.log('名称');
    }
  }
}
</script>
</style>

3、mutation的使用

3.1定义

// state默认参数，payload传递参数
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

3.2提交

// 第一种方式
this.$store.commit('user/increment', {
  amount: 10
})

// 第二种方式
this.$store.commit({
  type: ''user/increment',
  amount: 10
})

三、mapActions的使用

1、mapActions：数组写法和对象写法

export default {
  namespaced: true,
  state: {
    count: 1,
    count1: 11,
  },
  mutations: {
    setcount (state,payload) {
      state.count = payload
    },
    setcount1 (state,payload) {
      state.count1 = payload
    },
  },
  actions:{
    setcountAction(context, payload){
      context.commit('setcount', payload.count)
    },
    setcountAction1(context, payload){
      context.commit('setcount1', payload.count)
    },
  }
}

1.1数组写法

<template>
  <div>
    <button @click="setcountAction(obj)">{{ count }}</button>
    <button @click="handle">{{ count1 }}</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      obj: {
        count: 10
      },
      obj1: {
        count: 100
      },
    }
  },
  computed: {
    ...mapState('user', {
      count: 'count',
      count1: 'count1',
    })
  },
  methods: {
    ...mapActions('user', ['setcountAction', 'setcountAction1']),
    handle () {
      this.setcountAction1(this.obj1)
    }
  }
}
</script>

1.2对象写法

<template>
  <div>
    <button @click="add(obj)">{{ count }}</button>
    <button @click="handle">{{ count1 }}</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      obj: {
        count: 10
      },
      obj1: {
        count: 100
      },
    }
  },
  computed: {
    ...mapState('user', {
      count: 'count',
      count1: 'count1',
    })
  },
  methods: {
    ...mapActions('user', {
      add: 'setcountAction',
      add1: 'setcountAction1',
    }),
    handle () {
      this.add1(this.obj1)
    }
  }
}
</script>

2、actions的使用

2.1定义

// context默认参数，是一个对象，常用{ commit }、{ dispatch}
actions:{
  setcountAction(context, payload){
    context.commit('setcount', payload.count)
  }
}

2.2、参数：context对象

一共有6个参数：
{dispatch，commit ，state ，getters ，rootState，rootGetters}

2.3、分发（常规使用）

// 第一种方式
this.$store.dispatch('user/setcountAction', {
  count: 10
})

// 第二种方式
// 以对象形式分发
this.$store.dispatch({
  type: 'user/setcountAction',
  count: 10
})