VueX状态管理Module的使用 mapState

1. src目录文件下新建module文件夹，在module文件夹下新建第一个模型cart，新建index.js ，包含state 、mutations 、actions 、getters ，不要忘记用export default把它们暴露出去。

//     src/module/cart/index.js
const state = {}

const mutations = {}

const actions = {}

const getters = {}


export default {
  state,
  mutations,
  actions,
  getters
}

2. 在store.js主vuex文件里面引入module

//  src/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import cart from './module/cart'   //引入cart 

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    cart: cart  
  }
})

3. mapState 的使用

//  src/module/cart/index.js  
 const state = {
  list:[{
    name:'香蕉',
    price:12,
    code:'123456798'
  },{
    name:'苹果',
    price:18,
    code:'987654321'
  }]
}

//about.vue  使用mapState取值

import { mapState } from 'vuex'  
// 写法一
computed: {
      ...mapState({  //...展开运算符
        list: state => state.cart.list   //此处注意需要区分模块(cart)，不能少 .cart.
      })
    }

// 写法二
computed: mapState ({ 
        list: state => state.cart.list  
      })
    }

// 写法三
computed:{
 list: function () {
       return this.$store.state.cart.list
     },
}

4. actions 的使用，注意参数context，

//  src/module/cart/index.js  

const actions = {
  getInfo (context) {
    Api.get('/api/group/listByRecommend', qs.stringify({})).then(response => {
      //使用commit提交(调用)mutations 中的getInfo方法改变state中的getInfo
      context.commit('getInfo', response.data)
    })
  }
}

// about.vue  
//使用dispatch提交(调用)actions中的getInfo方法
    created () {
      this.$store.dispatch('getInfo')
    },

4. mutations的使用，注意参数state，

//  src/module/cart/index.js  

const mutations = {
  getInfo (state, data) {
    state.grouplist = data
  }
}
//data为actions 中传过来的值