既然选择了远方，便只顾风雨兼程 __ HANS许
系列：零基础搭建前后端分离项目
-
-
-
-
- 系列：零基础搭建前后端分离项目
- 插件
- 路由(vue-router)
- 状态管理模式(Vuex)
-
-
-
那在上篇文章，我们讲了，Vue的生命周期，Vue的组件,那这篇文章我们讲下更进阶的：插件，路由，状态管理。
插件
插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：
- 添加全局方法或者属性，如: vue-custom-element
- 添加全局资源：指令/过滤器/过渡等，如 vue-touch
- 通过全局 mixin 方法添加一些组件选项，如: vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
- 使用插件
使用全局方法
Vue.use(myplus)，就可以使用了，但在此事前要引用插件的js，直接引用或者npm i myplus进行安装，然后import myplus from Myplus。 - 开发插件
Vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：简单来讲，就是自己扩展Vue。
var myPlugins= {
install(Vue, options) {
Vue.$data = {
firstName: "大漠",
lastName: "W3cplus"
};
console.log(`${Vue.$data.firstName}_${Vue.$data.lastName}`);
// 2. 添加全局资源
Vue.directive("hello", {
// 只调用一次，指令第一次绑定到元素时调用
bind: function () {
console.log("触发bind钩子函数！");
},
// 被绑定元素插入父节点时调用
inserted: function (el) {
console.log("触发inserted钩子函数！");
},
// 所在组件的`VNode`更新时调用，但是可能发生在其子元素的`VNode`更新之前
update: function (el) {
console.log("触发update钩子函数！");
},
// 所在组件的`VNode`及其子元素的`VNode`全部更新时调用
componentUpdated: function (el) {
console.log("触发componentUpdated钩子函数！");
},
// 只调用一次，指令与元素解绑时调用
unbind: function (el) {
console.log("触发unbind钩子函数！");
}
});
//// 3. 注入组件
Vue.mixin({
methods: {
update() {
this.message = "Hi! 大漠";
},
uninstall() {
this.message = "";
},
install() {
this.message = "Hello！W3cplus";
}
}
});
Vue.prototype.$message = "我是一只小小鸟....";
Vue.prototype.showMessage = value => {
console.log(value);
};
}
};
例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/Code/Vue/sample/10插件.html
路由(vue-router)
vue-router也是一个插件。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
安装，跟上面的一样，可以直接引用<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>，可以使用npm来安装使用。
例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/Code/Vue/sample/12路由系统.html
- 定义路由
要使用路由，就必须定义一个路由以及一个路由出口，也就是显示的内容的容器。
// 定义路由 const routes = [ { path: ‘/foo‘, component: Foo }, { path: ‘/bar‘, component: Bar } ] //创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) // 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount(‘#app‘)<!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> - 跳转
<router-link to="/foo">Go to Foo</router-link>这样的语句就可以跳转
/foo了，然后会根据配置好的路由，跳转相对用地址。在路由出口显示你的/foo所关联的组件形成的内容。如果需要内部调用的话，可以使用router.push(‘/foo‘) - 跳转+参数
<router-link :to="{path:‘/bar‘,params:{message:‘params传值‘},query:{message:‘query传值‘}}">Go to Bar</router-link>这样的语句就可以跳转
/bar了，并且传递携带的参数。然后会根据配置好的路由，跳转相对用地址。在路由出口显示你的/bar所关联的组件形成的内容。如果需要内部调用的话，可以使用router.push({ path: ‘register‘, query: { message:‘query传值‘ }})注意：如果提供了 path，params 会被忽略，也就是params不会传递过去的
那么怎么获取传递过去的参数呢?
vm.$route.query.message; vm.$route.params.message;像这样就可以获取到路由的数据了，vm代表的是Vue实例本身。
状态管理模式(Vuex)
vuex也是一个插件。
Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
Vuex简单来讲，就是一个或多个组件可以共享一个对象。对象更新，相对应的组件也更新，这样就可以解决同级组件的交互问题。
安装：同样道理，跟上面一样，可以直接引用<script src="https://unpkg.com/vuex"></script>，也可npm安装。
例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/Code/Vue/sample/13状态管理模式Vuex.html
const store = new Vuex.Store({
state: {
/**作为共享状态添加*/
products: [
{ name: ‘鼠标‘, price: 20 },
{ name: ‘键盘‘, price: 40 },
{ name: ‘耳机‘, price: 60 },
{ name: ‘显示屏‘, price: 80 }
]
},
getters: {
saleProducts: (state) => {
let saleProducts = state.products.map(product => {
return {
name: product.name,
price: product.price / 2
}
})
return saleProducts;
}
},
mutations: { //添加mutations，方法只有同步，不能异步
minusPrice(state, payload) {
let newPrice = state.products.forEach(product => {
product.price -= payload
})
}
},
actions: { //添加actions context为store对象
minusPriceAsync(context, payload) {
setTimeout(() => {
context.commit(‘minusPrice‘, payload); //context提交
}, 2000)
}
}
})
上面就定义了一个store(仓库)，仓库有state，getters，mutations，actions,我们一个个讲过去。
- state
state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.也就是说，他是公有的，是所有组件可以共享的。
- getters
getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
- mutations
mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数。
- actions
actions 类似于 mutations，不同在于：
- actions提交的是mutations而不是直接变更状态
- actions中可以包含异步操作, mutations中绝对不允许出现异步
- actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
- 我们可以使用
setTimeout来模拟异步操作，或者Promise来进行异步。
在这篇文章，我们更深入去了解Vue，通过Vue官方自带的插件，学习了更多，插件我们可以根据需求自己开发，官方提供的路由，状态管理等插件，在开发也起到非常大的重用，
在接下来的最后一篇文章，我们会讲述vue-cli3.0来创建vue项目与Vue项目的调试。
原文地址：https://www.cnblogs.com/xuhuale/p/10281617.html