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中就不会