vuex和vue-router全家桶

vuex

关键词：state，getters，actions，mutations，store。

state为状态的参数。

getters为获取器，用于过滤的方法获取参数。

mutations是改变状态参数的函数，但是不能直接被调用，需要对应的mit（可以额外传参数）。

actions不是直接修改状态，而是基于mutations，可以执行异步处理

store更像一个容器，装着以上的所有函数和参数，最后需要注入到Vue的实例当中。

2.0 特性--辅助函数

辅助函数j就是可用可不用。如果你用了，它就会提高代码编写效率的。

mapState

mapGetter

mapMutation

举个例子，如果不用辅助函数mapState，

computed: { count () { return this.$store.state.count } }

使用辅助函数mapState，

computed: mapState([ // 映射 this.count 为 store.state.count "count"])

如果不用辅助函数mapGetter

computed: { doneTodosCount () { return this.$store.getters.doneTodosCount }}

使用辅助函数mapGetter

computed: { // 使用对象展开运算符将 getters 混入 computed 对象中 ...mapGetters([ "doneTodosCount", "anotherGetter", ]) }

如果不用辅助函数mapMutation

methods: { increment(){ this.$mit("increment") },}

使用辅助函数mapMutation

methods: { ...mapMutations([ "increment", ]),}

如果不用辅助函数mapActions

methods: { increment(){ this.$store.dispatch("increment") },}

使用辅助函数mapActions

methods: { ... mapActions([ "increment", ]),}vue-rounter

vue-router的出现不是个意外，也不是让你将所有的路由都装在vue-router。它更多是用于SPA，把一些动态的内容提取出来。例如动态路由。详情请参考官网const User = { template: "<div>User</div>"}const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: "/user/:id", component: User } ]})

路由可以针对组件User分配id，js端也可以获取路由的参数。

const User = { template: "<div>User {{ $route.params.id }}</div>"}关于懒加载

懒加载的功能并非vue特有，而是webpack特有的，有几种特殊的写法const Foo = resolve => { // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point // （代码分块） require.ensure(["./Foo.vue"], () => { resolve(require("./Foo.vue")) })}

也可以简写为

const Foo = resolve => require(["./Foo.vue"], resolve)

懒加载会独立分包，把对应的组件独立打包。而懒加载组件的css将不会进行提取。但是会对route-view级别的css进行打包，因此建议将共有的css放在route-view级别。

来源：/content-4-388401.html

如果觉得《vuex和vue-router全家桶》对你有帮助，请点赞、收藏，并留下你的观点哦！