vuex-mapState,mapGetters,mapMutations,mapActions 的使用方法

组件中写法：

state获取的方法

$store.state.user.count

...mapState(['userIndex'])

...mapState({userIndex: state => state.user.user}),

state定义

  state: {
    name: '用户',
    todos: [
      { id: 1, done: true, text: '我是码农' },
      { id: 2, done: false, text: '我是码农202号' },
      { id: 3, done: true, text: '我是码农202号' }
    ],
    count: 0,
    count2: 0
  },

 

---

getters

$store.getters['user/gettersName1'] // $store.getters查看打印结果
 
...mapGetters('user', {gettersName2: 'gettersName1'   }),

...mapGetters(['gettersName1']),

...mapGetters('user', ['gettersName']),

  getters: {
    gettersName1 () {
      return 'user-getters-name1'
    },
    gettersName2 () {
      return 'user-getters-name1'
    }
  },

 

---

mutations

 this.$store.commit('user/add', 5)

 ...mapMutations('user', ['sum']) //参数放在sum(5).

对应的js文件中的mutations

  mutations: {
    add: (state, data) => {
      state.count += data
    },
    sum: (state, data) => {
      state.count2 += data
    }
  },

 

---

Actions

addYibu1 () {
   this.$store.dispatch('user/addAction1', 5)
},

...mapActions('user', ['addAction2']),

对应js里面的action

  actions: {
    addAction: (context, data) => {
      context.commit('sum', data)
    },
    //方式2
    addAction1 ({ commit }, data) {
      commit('sum', data)
    },
    addAction2 ({ commit }, data) {
      commit('sum', data)
    },
    addAction3 ({ commit }, data) {
      commit('sum', data)
    }

  }

 

 

 

<template>
  <div class="hello">
    <h1>mapState</h1>
    <h1>index.js【mapState】：{{IndexName}}</h1>
    <h1>user.js【mapState】方式1：{{userName1}}</h1>
    <h1>user.js【mapState】方式2：{{userName2}}</h1>
    <h1>user store方式2：{{$store.state.user.name}}</h1>
    <hr>
    <h1>getter</h1>
    <h2>index.js--gettersName1:{{gettersName1}}</h2>
    <h2>index.js--gettersName12:{{gettersName2}}</h2>
    <h2>index.js--gettersName13:{{gettersName}}</h2>
    <h2>index.js--gettersName13:{{newName}}</h2>
    <h3>store.getters:{{$store.getters}}</h3>
    <h3>store.getters:{{$store.getters['user/gettersName1']}}</h3>
    <hr>
    <div><button @click="add">触发user.js-add</button> {{$store.state.user.count}}</div>
    <div><button @click="sum(5)">触发user.js-add</button> {{$store.state.user.count2}}</div>
    <!-- <div><button @click="add2(5)">触发user.js-add</button> {{$store.state.user.count}}</div> -->
    <hr>
    <div> <button @click="addYibu">异步按钮</button> </div>
    <div> <button @click="addYibu1">$store.dispatch异步按钮1</button> </div>
    <div> <button @click="addAction2(5)">addAction2异步按钮2</button> </div>
    <div> <button @click="addAction3(10)">addAction3异步按钮3</button> </div>
    <!-- <div> <button @click="addYibu3">异步按钮3</button> </div> -->

  </div>
</template>

<script>

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'


export default {
  name: 'HelloWorld',
  data () {
    return {
      newName: ''
    }
  },
  computed: {

    ...mapGetters(['gettersName1']),

    // 替换变量名
    ...mapGetters('user', {
      gettersName2: 'gettersName1'
    }),
    ...mapGetters('user', ['gettersName']),

    // 方式一
    // ...mapState(['userIndex'])

    // ...mapState({
    //   userIndex: state => state.user.user
    // }),

    ...mapState({
      IndexName: state => state.name
    }),

    ...mapState('user', {
      userName1: state => state.name
    }),

    ...mapState({
      userName2: state => state.user.name
    }),



  },
  mounted () {
    this.newName = this.gettersName + '加载后'
  },
  methods: {
    add () {
      this.$store.commit('user/add', 5)
    },
    // ...mapMutations('user', ['add']),
    ...mapMutations('user', ['sum']),

    // 异步提交
    addYibu () {
      this.$store.dispatch('user/addAction', 5)
    },
    addYibu1 () {
      this.$store.dispatch('user/addAction1', 5)
    },

    ...mapActions('user', ['addAction2']),
    ...mapActions('user', ['addAction3']),


  }

}

</script>

 

store->index.js

import Vue from 'vue'
import Vuex from 'vuex'

import user from './module/user'
import shop from './module/shop'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: 'index Name',
  },
  getters: {
    gettersName1: () => {
      return '【index-gettersName1】'
    },
    gettersName4: () => {
      return '【index-gettersName1-new】'
    }
  },
  mutations: {
    set_data (state, data) {
      state.user = data
    }
  },
  actions: {
    setData ({ commit }, data) {
      commit('set_data', data)
    }
  },
  modules: {
    user,
    shop
  }
})

store---module---user.js

export default {
  namespaced: true,
  state: {
    name: '用户',
    todos: [
      { id: 1, done: true, text: '我是码农' },
      { id: 2, done: false, text: '我是码农202号' },
      { id: 3, done: true, text: '我是码农202号' }
    ],
    count: 0,
    count2: 0
  },
  getters: {
    gettersName1 () {
      return 'user-getters-name1'
    },
    gettersName2 () {
      return 'user-getters-name1'
    }
  },
  mutations: {
    add: (state, data) => {
      state.count += data
    },
    sum: (state, data) => {
      state.count2 += data
    }
  },
  actions: {
    addAction: (context, data) => {
      context.commit('sum', data)
    },
    //方式2
    addAction1 ({ commit }, data) {
      commit('sum', data)
    },
    addAction2 ({ commit }, data) {
      commit('sum', data)
    },
    addAction3 ({ commit }, data) {
      commit('sum', data)
    }

  }
}

git :https://gitee.com/xnmde8/vuex_learning_organization.git