vuex详解

一、什么是vuex ?

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

二、vuex 的5个核心概念

1. State 定义状态(变量), 辅助函数mapState
1. Getter 获取状态(变量的值),同时可以对状态进行处理, 辅助函数- mapGetters
1. Mutation 修改状态(修改变量的值)
1. Action 触发 mutation 函数,从而修改状态,支持异步
1. 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 中为例子

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