vuex 的使用

vuex的执行过程，组件派发任务（dispatch）到 actions，然后由actions来触发mutations中的方法，进而更新state中的数据。

那么getter呢？getter也比较简单，就是相当于对state里面数据的一种衍生数据，比如说对state里面数据进行的过滤等等，在多个组件都需要时就很方便，看这里Getter

什么安装，导入过程就略过了，直接来使用

1.基本写法 vuex

app.vue同级新建store文件夹，store内新建index.js，这里面代码是随便粘的

import Vue from 'vue'
import Vuex from 'vuex'
 
// 告诉 vue “使用” vuex
Vue.use(Vuex)
 
// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
  state: {
    // 放置初始状态 app启动的时候的全局的初始值
    bankInf: {"name":"我是vuex的第一个数据","id":100,"bankName":"中国银行"}
  },
  mutations: {
    newBankname(state, msg) {
      state.bankInf.bankName = msg
    }
  }
})
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default store

组件中的调用和修改状态值，

// 使用 
computed: {
    handleStr: function() {
      return this.wudong.replace(",", " ").split(" ").reverse().join("英")
    },
    bankName() {
      return this.$store.state.bankInf.bankName;
    }
  },

// 修改 这里需要调用 mutations 里面的方法

methods: {
    handleClick() {
      this.$store.commit('newBankname', this.wudong)
    } 
}

这样写很没劲，很乱，看看这个写法

2.模块化的写法

代码也是找的，看个意思就行，不必纠结

store文件夹中新建，state.js 存放基本状态数据

export default {
  pathName: 'this is your faith', // 路由
  currDbSource: {}, // 当前数据源
  currJobData: {}, // 当前元数据
  DbSource: [], // 所有数据源，供元数据界面下拉列表使用
  selectJobMeta: {}, // 当前选择的元数据（搜索后点击的单条数据）
  specialSubject: [], // 专题数据（多条）
  duplicateJobMeta: {}, // 复制的数据
};

mutations.js 实际方法并暴露，注意单纯 this.$store.commit() 直接调用mutations是同步

// 保存当前菜单栏的路径
export const savePath = (state, pathName) => {
  state.pathName = pathName;
};
 
// 保存当前点击的数据源
export const saveCurrDbSource = (state, currDbSource) => {
  state.currDbSource = currDbSource;
};
 
// 保存当前点击的元数据
export const saveCurrJobData = (state, currJobData) => {
  state.currJobData = null;
  state.currJobData = currJobData;
};
 
// 保存所有数据源
export const saveDbSource = (state, DbSource) => {
  state.DbSource = DbSource;
};
 
// 保存搜索后选择的那一条元数据
export const saveSelectJobMeta = (state, selectJobMeta) => {
  state.selectJobMeta = selectJobMeta;
};
 
// 保存搜索的那一类专题
export const saveSpecialSubject = (state, specialSubject) => {
  state.specialSubject = specialSubject;
  state.selectJobMeta = {};
};
 
// 保存复制的元数据（名称为空）
export const saveDuplicateJobMeta = (state, duplicateJobMeta) => {
  state.duplicateJobMeta = duplicateJobMeta;
};

actions.js 是对于mutations的一种装饰而已，使mutations里的方法可以异步 dispatch，让我想起react了。。。哎。。。

// 触发保存菜单栏的路径方法
export const savePath = ({ commit }, payload) => {
  commit('savePath', payload);
};
 
// 触发获取当前点击的数据源方法
export const saveCurrDbSource = ({ commit }, payload) => {
  commit('saveCurrDbSource', payload);
};
 
// 触发获取当前点击的元数据方法
export const saveCurrJobData = ({ commit }, payload) => {
  commit('saveCurrJobData', payload);
};
 
// 触发获取所有数据源方法
export const saveDbSource = ({ commit }, payload) => {
  commit('saveDbSource', payload);
};
 
// 触发保存搜索后选择单条元数据方法
export const saveSelectJobMeta = ({ commit }, payload) => {
  commit('saveSelectJobMeta', payload);
};
 
// 触发保存搜索专题数据方法
export const saveSpecialSubject = ({ commit }, payload) => {
  commit('saveSpecialSubject', payload);
};
 
// 触发保存复制元数据方法
export const saveDuplicateJobMeta = ({ commit }, payload) => {
  commit('saveDuplicateJobMeta', payload);
};

组件中是如何使用的呢?

// 使用 还是 state 调用
  computed: {
    bankName() {
      return this.$store.state.pathName;
    }
  },

// dispatch 这是  异步 的

  methods: {
    handleClick() {
      this.$store.dispatch('savePath', this.wudong)
    }
  }

3. 这里还有个 modules 

modules是为了解决，store对象很大。这里就需要对store进行分割成模块，每个模块都有自己的state，mutations，actions，getter或者是嵌套的子模块。看这里Module