Vuex--状态管理库、模块式开发

Vuex是什么

vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件共用的数据

切记:并不是全部的项目都需要Vuex。如果项目小，完全不需要Vuex；如果项目很大，组件很多、数据很多，数据维护很费劲，建议使用vuex.

安装

cnpm install --save vuex

核心概念

state:仓库存储数据的地方
mutations：修改state的唯一手段
actions：处理action，可以书写自己的业务逻辑，也可以处理异步
getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更方便
modules：模块式开发

基本使用

配置仓库

代码

import Vue from "vue";
import Vuex from 'vuex';

//需要使用插件一次
Vue.use(Vuex);

//state:仓库存储数据的地方
const state = {};
//mutations:修改state的唯一手段
const mutations ={};
//action:处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {};
//getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更方便
const getters = {};

//对外暴露store类的一个实例
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

配置完后，需要在main.js中引用

import Vue from 'vue'
import App from './App.vue'
//三级联动组件--注册为全局组件
import TypeNav from '@/pages/Home/TypeNav';
//第一个参数：全局组件的名字；第二个参数：哪一个组件
Vue.component(TypeNav.name,TypeNav);

//引入路由
import router from '@/router';
//引入仓库
import store from '@/store';

import {reqCategoryList} from '@/api';
reqCategoryList();
new Vue({
  render: h => h(App),
  //注册路由信息：当这里写router的时候，组件身上都拥有$roter和$router
  router,
   //注册仓库:组件实例的身上会多出一个属性,$store属性
  store
}).$mount('#app')

模块式开发应用

主模块

import Vue from "vue";
import Vuex from 'vuex';

//需要使用插件一次
Vue.use(Vuex);

//引入小仓库
import home from './home';
import search from './search';

//对外暴露store类的一个实例
export default new Vuex.Store({
 //实现vuex仓库模块式开发存储数据
    modules:{
        home,
        search
    }
})

小仓库模块(home)

//home模块的小仓库
//state:仓库存储数据的地方
const state = {};
//mutations:修改state的唯一手段
const mutations ={};
//action:处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {};
//getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更方便
const getters = {};

//对外暴露store类的一个实例
export default{
    state,
    mutations,
    actions,
    getters
}

文件夹结构

页面效果