Vuex回顾Vuex的使用 1.导由于目前项目之中长时间没有使用vuex了，日常搬砖导致今天一个小需求：需要记录tab

Vuex的使用

1.导

由于目前项目之中长时间没有使用vuex了，日常搬砖导致今天一个小需求：需要记录tab的徐选项在用户返回的时候再次选中跳转之前的tab
处理方法

query参数方式
localStorage存储方式
vuex方式
eventBus方式（未尝试）但是结合本地项目的一些各种限制，1.参数方法导致代码参数处理繁琐，2.无法在合适的时候进行清理 4. 貌似有一些问题最终选择Vuex

结果！

结果！！

结果　！　！　！

结果，Vuex长时间没用了，忘记完了..........

2.vuex的简介

简介

vuex是一个vue.js的状态管理模式+库（？？？拗口），自己用就是相当于一个公共状态的存储地方，各个组件和模块大家都可以实时获取最新的状态和数据。

概念

官方给的核心概念是五个，我自己理解为四个核心，一个工程化。

四个核心 ==便于理解自己定义的名词==

store store(商店)，可以理解为vue之中的data()结构，顾名思义就是存储公共数据的地方，本质上就是一个对象，并且这个对象是支持响应式的。

❓ 本质上就是一个对象
getter getter(读取器)，可以理解为computed属性的getter，是用来读取state之中的数据的，已return出来的值为准

❓ 感觉像是vuex对store对象做了什么，将store对象的get属性进行了订阅/监听或者什么，使我们在访问store对象的时候会经过getter
mutations（同步） mutations(转变器)，可以理解为computed的setter，并且是更改 Vuex 的 store 中的状态的唯一方法

❓ 同上，像是代理或者什么的直接接管了store对象的set属性，相当于讲store对象的 ==存取器属性==进行了剥离暴露出来，本质是一个对象，内部存储的是每一个store对象内部数据的set函数（这个函数不能直接触发，在这里相当于注册，并向外提供触发方法的接口）
actions （异步） actions(触发器)，可以粗略的理解为method，用来触发mutations来修改store之中的数据

❓ 在这注册方法，通过特定的方式去触发mutations中的函数从而修改store之中的数据

一个工程化

modules

一个store模块可以包含四个核心属性，但是项目大了之后各种公共状态混杂导致难以维护，可以使用modules进行分包模块化处理方便维护

项目目录结构

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── getter.js        # 根级别的 getter
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        └── products.js   # 模块文件

####3.Vuex的使用方式

方式1

/* product.store.js */
const product = {
  state: {
    payState:0 // 定义公共状态
  },
  mutations: {
    CHANGE_PRODUCT_PAYSTATE(state,view){ // 修改payState的同步方法
        state.payState=view
    }
  },
  /* 
   1. Action 通过 store.dispatch 方法触发
  */
  actions: {
    changeState({commit},value){ // 修改的异步调用方法
    // 使用commit方法进行唤醒修改方法
        commit("CHANGE_PRODUCT_PAYSTATE",value)
    }
  },
  /* 
    1. `this.$store.product.getters.stateText
    2. map函数
  */
  getter:{
    stateText(store){ // 读取store的数据
        return ['未付款','已付款','待收货','y已收货'][store.payState]
    }
  }
}

export default product

方式二

// 可以将getter抽离出来
// getter.js 根目录
const getters = {
  language: state => state.app.language,
  curTab: state => state.wallet.curTab,
}
export default getters

store下面的index文件

// 方式一
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import errorLog from './modules/errorLog'
import permission from './modules/permission'
import getters from './getters' // 抽离的getter

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: { //手动注册模块
    app,
    errorLog,
    permission,
  },
  getters
})
export default store

// 方式一二
import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";

Vue.use(Vuex);

/* 自动读取注册模块的方法 */
const modulesFiles = require.context("./modules", true, /\.js$/);
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

const store = new Vuex.Store({
  modules,
  getters,
});

export default store;

结

Vuex官网： [vuex.vuejs.org/zh/guide/ac…]