Vue 使用过程中的问题记录

通过Vue-cil搭建项目
页面结构简单 header，middle，footer上中下，header是导航栏分为列表和新增，middle呈现内容，footer是摆设，

router配置：

//引入和使用省略

export default new Router({
    mode: "history",
    routes: [{
        path: '/',
        name: 'Main',
        redirect: { name: 'list' }
    }, {
        path: '/add',
        name: 'add',
        component: Add
    }, {
        path: '/list',
        name: 'list',
        component: List
    }]
})

header.vue

<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <router-link to="/list">
        <el-menu-item index="1">
            列表
        </el-menu-item>
    </router-link>
    <router-link to="/add">
        <el-menu-item index="2">新增</el-menu-item>
    </router-link>
</el-menu>

middle.vue

<template>
    <el-col :span="24">
         <router-view></router-view>
    </el-col>
</template>

1.点击导航栏渲染的问题：

渲染会把整个页面都渲染了  而通过我的代码也能知道我意图，是打算渲染middle那个组件，
解决：没有把Vue-router挂载到我打算转发的组件上

修改main.js

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(Main)//这里原来是初始配置的App
})

2.分页组件的使用

    通过axios获得数据后，有159条  我需要将它分页

<div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page" :page-sizes="[5,10,20,50]" :page-size="page_sizes" layout="total, sizes, prev, pager, next, jumper" :total="data_total">
                </el-pagination>
</div>

        size-change是当每页数量变化时调用函数，
        current-page是当前页数，
        page-sizes是可选的每页数量，
        page-size，当前每页数量，我们要通过这几个属性来显示参数
        total：数据总数

这样的话我就在显示数据的组件中设置了这几个值

import store from '../store/store'
    var state = store.state;
    store.dispatch("getList");
data() {
            return {
                    tableData: state.mans,//数据，通过store.dispatch("getList")获得
                    page_sizes: state.page_sizes,//当前页码尺寸
                    current_page: state.current_page,//当前页
                    data_total: state.total//数据总数
            }，
        methods: {
            //每页的尺寸变化调用方法
            handleSizeChange(val) {
                state.current_page = 1;
                state.page_sizes = val;
                store.dispatch("getList");
            },
            当前页码变化调用方法
            handleCurrentChange(val) {
                state.current_page = val;
                store.dispatch("getList");
            }
        },
        store,
    },

vuex的store.js的配置
，在配置中的注释解释

const state = {
    mans: [],//空数据
    page_sizes: 20,//设置的默认页码尺寸
    total: 1000000,//设置的默认数据总数
    current_page: 1//设置的默认当前页
}

const mutations = {
    //我用来添加数据的测试方法  和分页没关系
    add(state, man) {
        state.mans.push(man);
    },
}

const actions = {
    // 封装一个 ajax 方法
    getList(context) {
        axios({
                method: 'post',
                url: '/poll/cgi/bp/usermgt/user/page',//请求数据URL
                //这是接口需要的请求参数，不过只要提供前两个就行都是state中提供的，后面三个给默认值
                data: {
                    "pageIndex": state.current_page,
                    "pageSize": state.page_sizes,
                    "rowTotal": 0,
                    "startRow": 0,
                    "param": {}
                }
            })
            .then(function(res) {
                var data = res.data.data;
                var tableData = data.data;
                //清空数组
                state.mans.splice(0, state.mans.length); 
                //为数组添加数据
                for(var i = 0; i < tableData.length; i++) {
                    var man = { 
                        index : i + 1, 
                        name  : tableData[i].name, 
                        sex   : tableData[i].sex == 1 ? '男' 
                        : tableData[i].sex == 0 ? '女' : '无' 
                    };
                    state.mans.push(man);
                }
                //获得从接口取出的数据总数
                state.total = data.rowTotal;
            })
            .catch(function(err) {
                console.log(err)
            })
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

通过以上配置 可以请求到正确的数据，但是分页插件会出现BUG

图片可见 我的页码总数的错误的 我并没有有那么多数据 点到后面列表是空的了
并且

我点击5条每页后 ，分页组件上选择的依然是20页

    原因：page-size，当前每页数量，我们要通过这几个属性来显示参数
         total：数据总数

    这两个依然是我state.js中的默认属性，getList（）执行后并没有改变这两个属性，通过打日志后发现，

//以下代码是成功改变了state.total，而是组件中的data_total，没有改变，依然是我一开始给的默认值
state.total = data.rowTotal;

handleSizeChange(val) {
                state.current_page = 1;//这行代码也成功改变了state中的值，但是组件中的page_sizes没有随着改变
                state.page_sizes = val;//成功改变，所以请求的数据是正确的
                store.dispatch("getList");
            },

随后尝试通过在组件中直接改变值而不是通过VueX

this.page_sizes=state.page_sizes 
......//其他改变数值的办法

最后是成功的 但是不符合状态管理的思想，所以另想办法，

后来将getList从action中挪到mutation中，如此可以改变改变页面尺寸后依然没有改变显示的尺码属性问题，但是头一次访问的时候还是有BUG的

---

最后把该组件中的所有由data返回的数值改由computed返回即：

data() {
            return {
                //以下数据是原来存放地点  后来移动至computed
                //tableData: state.mans,
                //page_sizes: state.page_sizes,
                //current_page: state.current_page,
                //data_total: state.total
            }
        },
computed: {
            data_total: function() {
                return state.total;
            },
            tableData: function() {
                return state.mans;
            },
            page_sizes: function() {
                return state.page_sizes;
            },
            current_page: function() {
                return state.current_page;
            }
        },

如此就OK~~~
如果该属性放在computed中 那么他就会随着state对象的值改变，可能存在某种监控
但是在data中就不会