一、什么是vuex ?

答： 通俗的来说，我们可以把全局需要用到的数据【例如: 数据 a】放在vuex中，同理，vuex中可以通过acitons 和mutations 来获取到全局的数据例如如【a】，把这个【a】放在state中，全局便能进一步获取。

二、vuex 的5个核心概念

• 1. State 定义状态(变量), 辅助函数mapState
• 2. Getter 获取状态(变量的值),同时可以对状态进行处理, 辅助函数- mapGetters
• 3. Mutation 修改状态(修改变量的值)
• 4. Action 触发 mutation 函数,从而修改状态,支持异步
• 5. Module 当状态很多时,把状态分开来管理

三、安装 vuex。

vuex也是需要安装的，并不是vue-cli 自带出来的。前提是我们已经初始了一个项目。

// 创建一个vue项目
vue init webpack '项目名称'  
 // 下载模块
cnpm install                         
// 下载vuex
cnpm install vuex --save    

四、vuex配置

1. 在根目录下新建store 文件夹， 然后在store文件夹中再新建一个index.js. 目录路径如下图，不可更改

image.png
2. store文件夹中【index.js】 中这样书写

// from 'vue'为小写，提醒我自己，经常用写成大写
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex);

const store = new Vuex.Store({
    // 定义状态(变量)
    state: {
        // 收藏的商品的数量
        favoriteNum: 0
    },
    // 获取状态(变量的值),同时可以对状态进行处理, 辅助函数-  mapGetters
    getters: {
        // 收藏的商品总数
        favoriteNum(state) {
            return state.favoriteNum
        }
    },
    // Mutation 修改状态(修改变量的值)
    mutations: {
        // 收藏的商品总数
        setFavoriteNum(state, params) {
            state.favoriteNum = params;
        }
    },
    // Action 触发 mutation 函数,从而修改状态,支持异步
    actions: {
        // 得到收藏的商品数量
        // 需要传参数这样写   getFavoriteNum({ commit }, {vm, 参数名1, 参数名2, 参数名3...}) {}
        getFavoriteNum({commit}, {vm}) {
            vm.$resetAjax({
                type: 'GET',
                url: `/choose/goods/get_favorite_num`,
                success: (res) => {
                    let result = JSON.parse(res).data;
                    commit('setFavoriteNum', result ? Number(result) : 0);
                }
            })
        },
    }
});
// 导出store 这里需要用export default 进行导出
export default store;

3. 在main.js导入store并挂载到vue的实例上

import Vue from 'vue'               // vue引入需要小写
import App from './App.vue'
import store from './store/store'   // 引入store

var app = new Vue({
  el: '#app',
  store: store,                     // 把store注入到app实例里面
  render: h => h(App)
})

五、组件中引用 store

1. 获取store中state中的商品总数【favoriteNum】，以 fixed.vue 中为例子

<template>
   // 引用store中的favoriteNum数据
  <span>{{favoriteNum}}</span>
</template>
<script>
import { mapState} from 'vuex';
export default {
    computed: {
        //  通过辅助函数mapState可以把store中state中所有数据引进来，我们只引一个favoriteNum
        ...mapState([
            'favoriteNum'   // state中一个数据
        ]),
    },
</script>

2. 调用store中state中的获取商品总数的方法事件，以typeList.vue为例子

<script>
import { mapActions } from 'vuex';
export default {
    computed: {
        //  通过辅助函数mapState可以把store中state中所有数据引进来，我们只引一个favoriteNum
        ...mapState([
            'favoriteNum'   // state中一个数据
        ]),
    },
methods: {
   ...mapActions([
       'getFavoriteNum'
   ]),
    /**
     * 收藏、取消收藏操作
    */
   collectHandle(item,favorite) {
     this.$resetAjax({
          type: 'POST',
          url: '/choose/goods/add_favorite',
          success: (res) => {
              let result = JSON.parse(res);
              this.$Message.success({
                  duration: 3,
                  content: favorite === 0 ? '收藏商品成功 !' : ' 取消商品收藏成功 !'
              });
             // 通过this.getFavoriteNum({vm:this})来调用。
             this.getFavoriteNum({vm: this})
          }
     })
  },
}
</script>