非node环境vue全家桶实战
项目使用了vue+vue-router+vuex以及vant开发移动端页面，ajax请求使用的axios。
引入基本依赖
<link href="lib/vant.css" rel="stylesheet" charset="UTF-8">
<script src="lib/vant.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/axios.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/vue.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/vue-router.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/vuex.js" type="text/javascript" charset="UTF-8"></script>
页面是单页面多组件的方式，多个主键通过vue-router来hash路由
searchComponent：查询组件，路径：/
listComponent：列表组件，路径：/list
detailComponent：详细信息组件，路径：/detail
可以先在html上把布局和样式画好，然后复制成字符串模板，需要注意的是，模板最外层只能有一个div，也就是组件的根节点，不能有多个div并行。
const searchComponent = `<div>
...
</div>`
const listComponent = `<div>
...
</div>`
const detailComponent = `<div>
...
</div>`
Vue-Router 路由设置
path来指定组件的路径，component指定组件。需要注意的有3点。
- 之前是用el来指定div的id，现在是用template来指定html模板字符串
- data属性要通过return {}的方式来返回组件的属性
- 创建vue-router对象时，指定它的属性名是routes，经常有人写错成routers或者router。
const routers = [
{
path: "/",
component: {
template: searchComponent,
data() {
return {
}
},
methods: {},
}
},
{
path: "/list",
component: {
template: listComponent,
data() {
return {
}
},
methods: {},
}
},
{
path: "/detail",
component: {
template: detailComponent,
data() {
return {
}
},
methods: {},
}
},
]
// 创建vue-router对象
const router = new VueRouter({
routes: routers,
})
在这个例子中，路由跳转我是通过js完成的，比如this.$router.push({path: '/list'})
公共数据存储 -> Vuex
- state：相当于vue的data属性，存放着数据对象
- mutations：用来修改state中的数据，将vuex挂载到vue中时，可通过
this.$store.commit('saveLaws', [])来修改数据 - getters相当于vue中的计算属性
var store = new Vuex.Store({
state:{
total: 0,
laws: [],
lawsType: [],
punishType: [],
},
mutations:{
saveLaws(state, laws){
state.laws = laws
},
saveTotal(state, total){
state.total = total
},
},
getters: {
getLaws: state => {
return state.laws.filter(item => item.flag)
}
},
})
在组件中想要获取vuex中的state，需要用到vue的计算属性
当然，...是es6的语法糖，可以自动拆解多个对象或者属性和方法
computed: {
selfComputed() {
// 自己的计算属性
},
...Vuex.mapState({
laws: state => state.laws,
total: state => state.total,
}),
}
创建vue实例
将vue-router和vuex注册到vue中，因为vue中的对应的属性是router和store，而变量名也是这个，所以可以通过es6语法来直接赋值。
<div id="app" v-cloak>
<router-view></router-view>
</div>
vm = new Vue({
el: '#app',
router,
store,
})
关于axios请求，后台获取不到的问题
因为axios默认的请求格式是application/json，所以后台如果是java环境的话，最好通过@RequestBody来接收参数，或者在前端重新设置请求格式。
window.onload = function(){
axios({
url:'api/json.php',
method: 'post',
data: {n:1},
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
})
}
这样还是不行的话，需要用qs插件转下参数。
具体坑太多了，建议还是用application/json格式吧。
而且application/json格式传参的功能比application/x-www-form-urlencoded强大，可以穿数组或者嵌套对象。而放在application/x-www-form-urlencoded中后台可能就获取不到参数了。
参考
