(vue)store仓库的使用

(vue)store仓库的使用

---

index.js

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

import constructStore from "./modules/construct"; 
Vue.use(Vuex);

const store = new Vuex.Store({
	modules: { 
		constructStore, 
	},
}); 
export default store;

---

construct.js

import {getaddAttributeList} from "@/api/construct"; //引入接口

// 构建模块仓库
const constructStore = {
	namespaced: true,
	state:{
		//列表
		attributeList: [], 
		//分页
		pageNum: 1,
		pageSize: 10,
		fileLength: 0,
	},
	mutations:{
		//列表
		getattributeList(state, payload) {
			state.attributeList = payload;//更改state里attributeList的值
		},
		//查询名称
		getsearchAttribute(state, payload) {
			state.searchAttribute = payload;
		},
		//查询类型
		getselectValue(state, payload) {
			state.selectValue = payload;
		},
		//分页数
		getpageNum(state, payload) {
			state.pageNum = payload;//更改state里pageNum的值
		},
		//数据总数
		getfileLength(state, payload) {
			state.fileLength = payload;
		},
	},
	actions:{
		//列表
		async getaddAttributeList({
			commit,
			state
		}, payload) {
			const res = await getaddAttributeList({
				... 
				vertex: state.searchAttribute,
				lable: state.selectValue,
				pageNum: state.pageNum,
				pageSize: state.pageSize,
			});
			if (res) {
				commit("getattributeList", res.data.data.list); //提交mutations里的getattributeList方法
				commit("getfileLength", res.data.data.total); //提交mutations里的getfileLength方法
			}
		},
	},
	modules: {},
}

export default constructStore;

页面

<template>
	<!-- 表格 -->
    <div class="attributeMain" v-loading="loading">
      <Table
        ref="selection"
        :columns="columns"
        :data="attributeList" 
      ></Table>
      <div class="page">
        <Page
          v-if="pageshow"
          :total="fileLength"
          :page-size="customSize"
          @on-change="currentPageChange"
        />
      </div>
    </div>
<template>  
 
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  data() {
    return {
      searchAttribute: "", //查询内容
      selectValue: "", //查询类型 
      //分页
      pageshow: true,
      customSize:10,
    };
  },
  watch: {
    pageNum: {
      deep: true, 
      handler(newVal, oldVal) {
        this.getpageNum(newVal);//更改仓库当前分页
      },
    },
    searchAttribute: {
  		...//更改仓库查询内容
    },
    selectValue: {
      ...//更改仓库查询类型
    },
  },
  computed: {
    ...mapState("constructStore", ["attributeList","fileLength"]), //拿取页面需要的仓库状态数据
  }, 
  mounted() {
    this.getAllData(); //获取列表
  },
  methods: {
    ...mapActions("constructStore", ["getaddAttributeList"]),//仓库名称，action真正获取列表的方法
    ...mapMutations("constructStore", [ "getattributeList", "getsearchAttribute","getselectValue", "getpageNum",]),//仓库名称，mutation里改变state里属性的方法
    // 查询
    getAllData() {
      this.getaddAttributeList();//获取列表
    },
    //分页
    currentPageChange(val) {
      this.getpageNum(val); //通过仓库mutation里的方法去修改state里pageNum的值
      this.getAllData();
    },
  }
}