vuex模块化

模块化

/* eslint-disable */
import * as types from "../mutation-types";
import $ from "jquery";
import Request from "@/plugins/request";
import Constant from "@/plugins/constant";
import Util from "@/plugins/util";
// 保存组件的公共数据
const state = {
  memberList: {
    page: {
      current: 1,
      total: 0,
      size: 10
    },
    list: []
  }
};
/**
  *  Action 提交的是 mutation 而不是直接变更状态。
  *  action 可以包含任意异步操作。
  *  actions 对象里的方法需要使用 store.dispatch 调用。
  *  Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
  *  因此你可以调用 context.commit 提交一个 mutation，
  *  或者通过 context.state 和 context.getters 来获取 state 和 getters。
 */
const actions = {
  // 获取会员列表信息
  getMemberList: function(context, param) {
    // jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。不支持第一个参数传递 false 。
    let listData = $.extend(true, {}, state.memberList);
    listData.page.current = param.pageNo;
    listData.page.size = param.pageSize;
    Request.getMembersList(param).then(data => {
      // 请求接口
      if (data.success) {
         ...
        }
        context.commit(types.MEMBER_GET_LIST_DATA, listData);
      }
    });
  }
};
//可以将 getter 理解为 store 的计算属性, getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
const getters = {
  memberList: state => state.memberList
};
// mutations 对象中保存着更改数据的回调函数,该函数名官方规定叫 type, 第一个参数是 state, 第二参数是payload, 也就是自定义的参数。mutation 必须是同步函数。mutations 对象里的方法需要使用 store.commit 调用
const mutations = {
  // [types.MEMBER_GET_LIST_DATA] 必须是字符串
  [types.MEMBER_GET_LIST_DATA](state, res) {
    state.memberList = res;
  }
};
export default {
  state,
  actions,
  getters,
  mutations
};

 2.store.js

import Vue from 'vue'
import Vuex from 'vuex'

import index from './modules/index'
import member from './modules/member'
import order from './modules/order'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    index,
    member,
    order
  },
  strict: process.env.NODE_ENV !== 'production' // 线上环境关掉
})

3.页面中使用

<template>
  <div v-if="show" class="cp-member-list">
    <div class="screen-table">
      <div class="screen-group">
        <Input class="screen-item" v-model="phone" placeholder="手机号" clearable/>
        <Select class="screen-item" v-model="stateSelected" placeholder="状态" clearable>
          <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Button @click="doSearch" type="primary">
          <Icon class="iconfont icon-search"/>
          查询
        </Button>
      </div>

      <!--bodyData-->
      <Table width="100%" border :columns="headerData" :data="memberList.list"></Table>
    </div>

    <div class="page-content">
      <Page placement="top"
            size="small"
            :current="memberList.page.current"
            :total="memberList.page.total"
            :page-size="memberList.page.size"
            @on-change="pageCurrentChange"
            @on-page-size-change="pageSizeChange"
            show-total
            show-sizer
            show-elevator/>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Request from '@/plugins/request'

export default {
  props: {
    options: {
      type: Object,
      default: () => {
        return {}  // 默认值
      }
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data () {
    const t = this
    return {
      phone: '',
      headerData: [
        {
          type: 'index',
          title: '序号',
          key: 'serial',
          width: 42,
          align: 'center',
          fixed: 'left',
          className: 'serial'
        },
      ]
    }
  },
  computed: {
    ...mapState({
      // 映射
      userData: state => state.user.userData,
      memberList: state => state.member.memberList,
    })
  },
  methods: {
    // 页码改变的回调，返回改变后的页码
    pageCurrentChange (current) {
      this.getMemberList(current) // 获取会员列表
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    pageSizeChange (size) {
      this.getMemberList('', size) // 获取会员列表
    },
  // 查询
    doSearch () {
      this.getMemberList(1) // 获取会员列表
    },
    // 获取会员列表
    getMemberList (current = '', size = '') {
      const t = this
      //调用接口
      /**
       * 为了在 Vue 组件中访问 this.$store property，你需要为 Vue 实例提供创建好的 store。
       * Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：
       * new Vue({
          el: '#app',
          router,
          store,
          render: h => h(App)
        })
       */
      t.$store.dispatch('getMemberList', {
        mobile: t.phone || '', // 用户手机号码
        userId: t.userData.userId, // 用户的userId
        userToken: t.userData.userToken, // 用户的userToken
        pageSize: size || t.memberList.page.size, // 每页显示条数
        pageNo: current || t.memberList.page.current // 页码
      })
    },

  }
}
</script>