vuex和vue-router是vue生态系统中的很重要的两个工具
vuex 是vue用来管理数据状态的一种机制，将Vue中所有的状态（数据）抽离出来进行统一管理，一般来说，如果不是大型单页项目，像SPA这些，也是不会去使用vuex的，毕竟vue是一个轻量级的框架，启动快是它的特点，所以vue的优化就有很大的一点是尽可能的减少依赖数量，达到优化加载速度。
首先就是引入vuex，一种是直接引入vuex.js的文件，以script标签引入，另一种是利用npm install -g --dev全局安装开发时依赖，安装完依赖之后就是引入vuex模块，
import Vuex from "vuex"
import Vue from "vue"
之后通过显示的调用vuex
Vue.use(Vuex)
创建实例store
const store = new Vuex.store({
state:{},
getters:{}.
mutatios:{},
actions:{}
}),
我们还要在vue实例中去引入，注入store
new Vue({
store:store
})
vuex属性：state ：{}存放数据的集合；getters：{}，通过对state里面数据的操作，进而改变数据的状态，一般会使用数组迭代方法map()，filter()等，功能类似于vue实例中的computed计算属性，但他还有一个重要作用，在后面映射到vue实例的时候，这个后面再讲。
mutations：{}这个集合可以直接操作state里面的内容，可直接对state的数据状体进行操作，重要的是，在该集合内只能进行同步操作，不允许异步操作，也就是说，在mutations里面不能进行ajax或asnyc和await等操作，要进行这些操作我们在Actions:{}里面。这里会传入一个参数state(作为第一个参数，所以亦可以传入其他的参数，称为载荷Payload)，就是上面的state集合，从这里对state数据进行操作
Actions:{} 作用有点类似vue实例的methods：{}，存放各种方法的地方，唯有这里才能够进行异步操作，但是这个集合不能直接对state里的数据进行改变。这里操作改变的是对象是mutations里的数据，这里使用的方法会自动引入一个参数context，通过context.commit("")来对数据的操作(唤醒mutations的handler)，该context对象具有和store实例的相同的方法和属性，或者也可以使用context.state()或context.getters()，有时候我们也想使用actions里面的其他方法，我们就用context.dispatch("其他方法名") 进行触发，之所以这么做，是因为actions可以异步执行，而mutations只能同步。
将vuex实例中actions的映射到methods：
将vuex实例中的mutations的映射到computed（可映射多个）:
computed:{
...Vuex.mapMutations(["methods1","methods2"])
}
改变突变mutations，使用commit("mehtods");
当项目越写也大的时候，一个store实例已经不够用了，这时候就有一种module机制，将一个个store实例分成一个个模块，然后将其暴露出来，
这时候vue实例里注入vuex就不那么写了（注入之前要将module暴露export default，否则无效）
new Vue({
module:{
storeA:storeA,
storeB:storeB,
storeC:storeC
}
});
Vue-Router vue的路由机制
大型单页面的应用，当我们要跳转到另一个不同的页面时，使用a标签跳转是行不通的，只能使用路由，vue提供了一套完整的路由机制，以适应各种复杂的跳转情况。
引入vue-router：
npm install vue-router
创建实例
const router = new VueRouter({
routes:[{
component:"component",
path:"path",
children:[{
component:"myRouter",
path:"/childrenpath"
}]
}]
});
目标路由的写法：
var myRouter = {
template:"<div></div>"
},
将路由注入到vue实例中：
new Vue（{
el：“#app”，
router:router
}）;
这样一个简单的路由实例就完成了，
接下就是路由的渲染：
<router-view></router-view> 将这段代码放在你需要加载路由的地方，路由就会完成渲染。
除此之外你还需要写一段a标签，将routes里的path放到a标签的href属性里，并在path之前加#/
或者直接写<router-link to="path">路由</router-link> 用于路径导航，实现路由的注入。
二级路由：
<router-link to="path/path">二级路由<router-link>
同时将routes对象里的children子路由路径path设为你的二级路由的路径地址
渲染方式
将<view-router></view-router>插入一级路由的模板template下
网友评论