Vue.js-状况治理与Vuex

2024年4月17日 125次阅读来源: whjin

进修笔记：
状况治理与Vuex

状况治理与Vuex

非父子组件（跨级组件和兄弟组件）通讯时，运用了bus（中心事宜总线）的一个要领，用来触发和吸收事宜，进一步起到通讯的作用。

一个组件能够分为数据（model）和视图（view），数据更新时，视图也会自动更新。在视图中又能够绑定一个事宜，它们触发methods里指定的要领，从而能够转变数据、更新视图，这是一个组件基础的运转情势。

const store = new Vuex.Store({});

堆栈store包含了运用的数据（状况）和操纵过程。Vuex里的数据都是相应式的，任何组件运用一致store的数据时，只需store的数据变化，对应的组件也会马上更新。

数据保存在Vuex选项的state字段内。

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

在任何组件内，能够直接经由过程$store.state.count读取。

<template>
    <div>
        <h1>首页</h1>
        {{$store.state.count}}
    </div>
</template>

直接卸载template里显得有点乱，能够用一个盘算属性来显现：

<div>
    <h1>首页</h1>
    {{count}}
</div>

export default {
    computed: {
        count() {
            return $store.state.count;
        }
    }
}

在组件内来自store的数据只能读取，不能手动修正，修正store中数据的唯一门路是显式地提交mutations。

mutations是Vuex的第二个选项，用来直接修正state里的数据。

在组件内，经由过程this.$store.commit要领来实行mutations。

mutations还能够接收第二个参数，能够是数字、字符串或对象等范例。

ES6语法

函数的参数能够设定默许值，当没有传入该参数时，运用设置的值。

increment(state,n=1)等同于：
    increment(state,n){
        n=n||1;
    }

提交mutations的另一种体式格局是直接运用包含type属性的对象。

mutations里只管不要异步操纵数据，不然组件在
commit后数据不能马上转变，而且不知道什么时刻会转变。

高等用法

Vuex另有其他3个选项能够运用：getter、actions、modules。

getter能将computed的要领提取出来，也能够依靠其他的getter，把getter作为第二个参数。

action与mutation很像，差别的是action内里提交的是mutation，而且能够一步操纵营业逻辑。

action在组件内经由过程$store.dispatch触发。

modules用来将store支解到差别模块，当项目足够大时，store里的state、getters、mutations、actions会异常多，运用modules能够把它们写到差别的文件中。

module的mutation和getter吸收的第一个参数state是当前模块的状况。在actions和getters中还能够吸收一个参数rootState，来接见根节点的状况。

实战：中心事宜总线插件`vue-bus`

中心事宜总线bus作为一个简朴的组件通报事宜，用于处置惩罚跨级和兄弟组件通讯的题目。

vue-bus插件给Vue增加一个属性$bus，并代办$emit、$on、$off三个要领。

ES6语法

emit(event,..args)中的
...是函数参数的解构。由于不知道组件会通报若干个参数进来，运用
...args能够把从当前参数到末了的参数都猎取到。

运用vue-bus有两点须要注重：

第一是$bus.on应该在created钩子内运用，假如在mounted运用，它能够吸收不到其他组件来自created钩子内发出的事宜；
第二点是运用了$bus.on在beforeDestroy钩子里应该再运用$bus.off消除，由于组件烧毁后，就没有必要把监听的句柄存储在vue-bus中。

Vue插件

注册插件须要一个公然的要领install，它的第一个参数时Vue组织器，第二个参数是一个可选的选项对象。

<p data-height=”350″ data-theme-id=”0″ data-slug-hash=”RJVOXd” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue插件” class=”codepen”>See the Pen Vue插件 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

前端路由与`vue-router`

SPA的中心就是前端路由，关于一个网址，每次GET或POST等要求在服务端有一个特地的正则设置列表，然后婚配到详细的一条途径后，分发到差别的Controller，举行种种操纵，最终将html或数据返回给前端，如许就完成了一次IO。

前端路由，即由前端来保护一个路由划定规矩。完成体式格局有两种；

一种是应用url的hash，就是常说的锚点（#），JavaScript经由过程hashChange事宜来监听url的转变；
另一种就是HTML5的history情势，它使url看起来像平常网站那样，以/支解，没有#，但也没并没有跳转，不过运用这类情势须要服务端支撑，服务端在吸收到一切的要求后，都指向一致个html文件，不然会涌现404。

因而，SPA只要一个html，悉数网站一切的内容都在这个html里，经由过程JavaScript来处置惩罚。

假如要自力开辟一个前端路由，须要考虑到页面的可插拔、生命周期、内存治理等题目。

`vue-router`

vue-router的完成道理与经由过程is特征完成动态组件的要领相似，路由差别的页面事实上就是动态加载差别的组件。

建立一个数组来指定路由婚配列表，每一个路由映照一个组件：

const Routers = [
    {
        path: '/index',
        component: (resolve) => require(['./views/index.vue'], resolve)
    },
    {
        path: '/about',
        component: (resolve) => require(['./views/about.vue'], resolve)
    }
];

Routers里每一项的path属性就是指定当前婚配的途径，component是映照的组件。

webpack会把每一个路由都打包为一个js文件，在要求道该页面时，再去加载这个页面的js，也就是异步完成的懒加载（按需加载）。如许做的优点是不须要在翻开首页的时刻就把一切的页面内容悉数加载进来，只在接见时才加载。

运用了异步路由后，变移除的每一个页面的
js都叫做
chunk（块），它们定名默许是
0.main.js、
1.main.js…
能够在
webpack设置的出口
output里经由过程设置
chunkFilename字段修正
chunk定名。

output: {
    publicPath: "/dist/",
        filename: "[name].js",
        chunkFilename: "[name].chunk.js"
}

有了chunk后，在每一个页面（.vue文件）里写的款式也须要设置后才会打包进main.css，不然仍然会经由过程JavaScript动态建立<style>标签的情势写入。

const RouterConfig = {
    //运用HTML5的History路由情势
    mode: 'history',
    routes: Routers
};

const router = new VueRouter(RouterConfig);

new Vue({
    el: "#app",
    router: router,
    render: h => {
        return h(App)
    }
});

在RouterConfig里设置mode为history会开启HTML5的History路由情势，经由过程/设置途径。假如不设置mode，就会运用#来设置途径。

开启History路由，在临盆环境时必需举行设置，将一切路由都指向一致个html，或设置404页面，不然革新时页面就会涌现404。

在路由列内外，能够在末了新加一项，当接见的途径不存在时，重定向到首页：

{
    path: '*',
    redirect: '/index'
}

路由列表的path能够带参数，比方/user/123，个中用户ID123是动态的，但它们路由到一致个页面，在这个页面里，希冀猎取这个ID，然互殴要求相干数据。

跳转

vue-router有两种跳转页面的要领，第一种是运用内置的<router-link>组件，它会被衬着为一个<a>标签。

<template>
    <div>
        <h1>首页</h1>
        <router-link to="/about">跳转到about</router-link>
    </div>
</template>

它的用法与平常的组件一样，to是一个prop，指定须要跳转的途径，也能够用v-bind动态设置。

运用<router-link>，在HTML5的History情势下会阻拦点击，防止浏览器从新加载页面。

<router-view>另有其他一些prop，经常使用的有：

tag 能够指定衬着成什么标签，比方<router-link to="/about" tag="li">衬着的效果就是<li>，而不是<a>
replace 运用replace不会留下History纪录，所以导航后不能用退却键返回上一个页面，如<router-link to="/about" replace>
active-class 当<router-link>对应的路由婚配胜利时，会自定给当前元素设置一个名为router-link-active的class，设置prop:active-class能够修正默许的称号。在做相似导航栏时，能够运用该功用高亮显现当前页面对应的导航栏单项，然则平常不会修正active-class，直接运用默许值router-link-active。

有时刻，跳转页面能够须要在JavaScript中举行，相似于window.location.href。这时候能够运用第二种跳转要领，运用router实例的要领。

<template>
    <div>
        <h1>引见页</h1>
        <button @click="handleRouter">跳转到user</button>
    </div>
</template>

<script>
    export default {
        methods: {
            handleRouter() {
                this.$router.push('/user/123');
            }
        }
    }
</script>

$router另有其他一些要领：

replace 相似于<router-link>的replace功用，它不会向history增加新纪录，而是替换掉当前的history纪录，如this.$router.replace('/user/123')
go 相似于window.history.go()，在history纪录中向前或退却若干步，参数是整数

高等用法

在SPA项目中，怎样修正网页的题目？

在页面发作路由变化时，一致设置。

vue-router供应了导航钩子beforeEach和afterEach，它们会在路由行将转变前和转变后触发，所以设置题目能够在beforeEach钩子完成。

<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”gKRaLm” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”vue-router导航钩子” class=”codepen”>See the Pen vue-router导航钩子 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

导航钩子有3个参数：

to 行将要进入的目的的路由对象
from 当前导航行将要脱离的路由对象
next 挪用该要领后，才进入下一个钩子

路由列表的meta字段能够自定义一些信息，将每一个页面的title写入meta来一致保护，beforeEach钩子能够从路由对象to里猎取meta信息，从而转变题目。

某些页面须要校验是不是登录，假如登录就能够接见，不然跳转到登录页。经由过程localStorage来简朴推断是不是登录。

router.beforeEach((to, from, next) => {
    if (window.localStorage.getItem('token')) {
        next()
    } else {
        next('/login')
    }
});

next()的参数设置为false，能够作废导航，设置为详细的途径能够导航到指定的页面。

运用webpack构建

webpack的重要实用场景时单页面富运用（SPA）。SPA经由过程是由一个html文件和一堆按需加载的js文件构成。

export和import是用来导出和导入模块的。一个模块就是一个js文件，它具有自力的作用域，内里定义的变量外部是没法猎取的。

在module对象的rules属性中能够指定一系列的loaders，每一个loader都必需包含test和use两个选项。

当webpack编译过程当中碰到require()或import语句导入一个后缀名为.css的文件时，先将它经由过程css-loader转换，再经由过程style-loader转换，然后继承打包。use选项的值能够是数组或字符串，假如是数组，它的编译递次就是从后往前。

webpack的重要中心部份包含
进口（Entry）、
出口（Output）、
加载器（Loaders）、
插件（Plugin）。

单文件组件与`vue-loader`

<style>标签运用scoped属性，示意当前的CSS只在这个组件有用，假如不加，namediv的款式会运用到悉数项目。

运用.vue文件须要先装置vue-loader、vue-style-loader等加载器并做设置。假如要运用ES6语法，还须要装置babel和babel-loader等加载器。

<p data-height=”465″ data-theme-id=”0″ data-slug-hash=”NzjNgp” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-webpack.config.js” class=”codepen”>See the Pen Vue-webpack.config.js by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

新建.babelrc文件，并写入babel的设置，webpack会依靠此设置文件来运用babel编译ES6代码。

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

每一个.vue文件代表一个组件，组件之间能够相互依靠。

ES语法：

=>是箭头函数

render: h=>h(App)等同于
    render: function(h) {
        return h(App)
    }
    
也等同于：
    render: h=>{
        return h(App)
    }

箭头函数里的this指向与平常函数不一样，箭头函数体内的this对象就是定义时地点的对象，而不是运用时地点的对象。

    原文作者：whjin
    原文地址: https://segmentfault.com/a/1190000018559465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

状况治理与Vuex

高等用法

实战：中心事宜总线插件vue-bus

Vue插件

前端路由与vue-router

vue-router

跳转

高等用法

运用webpack构建

单文件组件与vue-loader

实战：中心事宜总线插件`vue-bus`

前端路由与`vue-router`

`vue-router`

单文件组件与`vue-loader`