非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中后台可能就获取不到参数了。

参考

https://cn.vuejs.org/v2/api/

https://router.vuejs.org/zh/

https://vuex.vuejs.org/zh/

# Vue