vuex的理解与使用

vuex（一般中大型项目中会用到）

作用：

vuex一般会用于中大型项目中(组件很多，需要共用数据)，官方而言，vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起,集中式来管理，他像是一个大仓库，来存放项目中要使用的数据，进行模块式开发

理解：

我们可以把一个项目所用到的数据，状态等放到一个大仓库中，而vuex就是这个大仓库，vuex是一个插件，所以我们就要先下载vuex
使用yarn命令 ： yarn add vuex@next --save
使用npm或者cnpm命令：npm install vuex@next --save
不过一般在搭架子的时候选上就自动装上了，我们可以在配置文件去看看
vuex就是一个大仓库，但是状态都放在一个大仓库又显得很臃肿，所以我们可以把大仓库分成很多小仓库，各个小仓库负责自己组件的状态，就实现了模块化开发，“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

安装完vuex以后，因为它是一个插件，所以得先使用一次，并且跟vue-router一样也要进行注册

import store from "./store"
new Vue({
    store,
    render: h => h(App),

}).$mount('#app')

一般会建一个文件夹store(默认),里面放各个组件的状态(小仓库)，也要把小仓库合并为一个大仓库，当然也要对外暴露，让别的组件去使用

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
import home from "./home";//自己写的两个组件用作示范
import search from "./search";
export default new Vuex.Store({ //对外暴露大仓库
    modules: { //实现了模块化开发,相当于把两个小仓库进行注册
        home,
        search,
        namespaced: true
    },
});

五个参数：

1 State(状态)，单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段
2 Mutation（唯一修改State的手段）,有时候在actions里面去对状态进行修改的时候控制台会报错，提示你的方法找不到，就是因为只有在Mutation才能去修改状态，actions是修改不了的
3 Actions(处理action的地方，可以书写自己的逻辑),actions是提交到mutations里面的，因为只有mutations才可以去修改state，在这里你可以进行异步处理，比如通过接口获取数据就可以使用async和await去获取数据进行提交，Action 通过 store.dispatch 方法触发：注意在组件获取数据的时候要用到辅助函数
**我们直接分发 mutation 岂不更方便？**不是的，因为mutations只能同步操作，而actions可以执行异步操作处理
4 Getters(简化仓库数据),可以认为是 store 的计算属性,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性.
5 Modules

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

使用：

import { reqgetCategoryList } from "../../api"; //reqCategoryList是接口，请求的数据
const state = {
    categoryList: [],
};
const mutations = {
    CATEGORYLIST(state, categoryList) {
        state.categoryList = categoryList;
    }
};
const actions = {
    async categoryList({ commit }) { //必须有commit，否则会报错(因为mutations是唯一修改state的地方，所以要提交给mutations)
        let result = await reqgetCategoryList
        CategoryList();
        if (result.code == 200) {
            commit("CATEGORYLIST", result.data) //如果是200，就提交给mutation
        }
    }
};
const getters = {};//代码逻辑简单，不需要简化
export default {
    state,
    mutations,
    actions,
    getters,
    namespaced: true//对外暴露
}