Vuex使用实记

我们都知道Vuex是一个专门为vue.js应用程序开发的状态管理模式。通俗点说，就是把我们所使用的变量全部放在一个地方（容器）存起来。在页面复杂而且很多的时候，有些变量是要实时更改变化的，而且很多组件都会用到相同的变量。正因为把所有的变量存在一起，是方便统一管理更新变量状态，方便每一个组件实时调配。特别适用变量类型庞大的工程项目。废话不多说，晒代码。

在这里我就不啰嗦配置vuex的环境搭建了，去官网就知道了https://vuex.vuejs.org/zh-cn/installation.html

在搭建好环境后你需要新建一个vuex文件夹，里面新建两个js文档，分别为fetch.js(封装的接口请求方法)和inde.js（这里就是变量存储库）。

在fetch.js文件里面

……

import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
const axiosURL = {
  userLogin: '/inter/user/userLogin',
  queryLoginInfo: '/inter/user/queryLoginInfo',
}
export var fetch = async(type = 'POST', url = '', data = '') => {
  let result
  type = type.toUpperCase()
  if (type === 'GET') {
     url = axiosURL[url] + data
    await axios.get(url)
        .then(res => {
          result = res.data
        }).catch((err) => {
         console.log(err)
        })
  } else if (type === 'POST') {
     url = axiosURL[url]
    await axios.post(url, data)
        .then(res => {
          result = res.data
        }).catch((err) => {
         console.log(err)
        })
  }
  return result
}

……

代码说明：首先是要引入‘vue’和‘axios’，然后声明axios。axiosURL里面放是你向后台请求数据的借口。接着就是封装的请求接口函数。估计一般的都可以看懂是什么意思。

在index.js文件里

……

import { fetch } from '@/fetch' ;
export default {
 namespaced: true,
    state: {
     //登入记录列表数据
     memberLoginInfoList :[]
    },
    mutations: {
     queryLoginInfo(state,data){
      state.memberLoginInfoList = data.data.memberLoginInfoList
     }
    },

    actions: {
     //查询登入记录
     async queryLoginInfo({commit},params){
        let res = await fetch('post','queryLoginInfo',params);
         commit("queryLoginInfo", res);
         return res
     }
    }
}

……

代码说明：同样，已经在fetch.js文件里面写了接口，自然需要引入fetch.js文件。我们都知道请求接口是有方法的，还需要相应的参数，请求成功了后台会返回给我们数据，我们前台需要取出来对吧。actions里面就是我们请求需要的方法和参数，mutations里面是吧我们请求到的数据进行赋值。我们请求来的额数据一般都是数组的形式，看state就知道是在声明我们的数组。

接口写好了数据得到了，那么我们就是要遍历调用展示了

在登入记录loginlog.vue文件里面

……

<template>
 <div class="loginlog">
   <div class="table-title">
      <span>上次更新时间：2018-01-31 11:47:45
            </span>
             <Button type="ghost">
               <Icon type="refresh"></Icon>
               刷新</Button>
     </div>
   <Table border  :columns="columns" :data="memberLoginInfoList"></Table>
 </div>
</template>

<script>
 import { mapActions,mapState } from "vuex";
    export default {
     created(){
      this.getQueryLoginInfo(this.page)
     },
        data () {
            return {
                columns: [
                    {
                        title: 'IP',
                        key: 'ip'
                    },
                    {
                        title: '登录时间',
                        key: 'loginTime'
                    },
                    {
                        title: '地区',
                        key: 'address'
                    }
                ]
            }
        },
        computed: mapState("account",["memberLoginInfoList"]),
        methods: {...mapActions("account",[ "queryLoginInfo"]),
   }，  

search() {
 var data = {};
 data.account = this.childAccount;
 data.endTime = this.formt(this.endTime);
 data.startTime = this.formt(this.startTime);
 data.page = this.page;
 data.type = this.mode1;
 this.queryChildBill(data).then(()=>{
  this.lotteryOrder = this.queryChildBillList.lotteryOrder;
 })
}

}</script>

……

我的案例是用框架iview写的所以放数据有点不一样。接收数据有这几点，

1、引入 import { mapActions,mapState } from "vuex";

2、导入和接收 computed: mapState("account",["memberLoginInfoList"]),

         methods: {...mapActions("account",[ "queryLoginInfo"]),

3、传入参数

search() {
 var data = {};
 data.account = this.childAccount;
 data.endTime = this.formt(this.endTime);
 data.startTime = this.formt(this.startTime);
 data.page = this.page;
 data.type = this.mode1;
 this.queryChildBill(data).then(()=>{
  this.lotteryOrder = this.queryChildBillList.lotteryOrder;
 })
}。