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下