作用： 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 }) { /
