vuex一些易混淆概念

vuex 是针对 vue 而设计的状态管理扩展，你可以理解为 react 中的 Redux，和 flux 的衍生物。本文并不是详细教程，是介绍使用 vuex 中，一些让人迷惑的点的文章，因为大多数人为了快速使用 vuex，而选择看视频或者不求甚解地阅读文档，但是当深入做项目时，难免会有几个点会不禁要问自己几个为什么：

1. 使用 dispatch 还是 commit ？

在vue 组件中（Child.vue），我们会给定一个方法，通过这个方法使用 dispatch 触发 action 从而提交相应的 mutation，举个栗子：

methods: {
methods: {
    show(id) {
        if(id == 1) {
            this.$store.dispatch('showA');
        } else {
            this.$store.dispatch('hideA');
        }
    }
}

methods: {
    show(id) {
        if(id == 1) {
            this.$store.commit('SHOW_A'); // 使用大写是一种推荐命名写法，具体看文档
        } else {
            this.$store.commit('HIDE_A');
        }
    }
}

这两者，在处理简单的状态变化时，没有区别，当需要异步，或者其他复杂操作时，dispatch 就更加适用，因为 mutation 是同步改变状态的，无法执行异步操作，而 dispatch 的含义是“先触发action”，经过 action 你可以执行异步操作，actionA 和 actionB 之间的先后顺序等等，而在组件中直接 commit 无法执行一系列复杂操作。

2. 向 dispatch 和 commit 传递参数：

在写项目的时候，由于之前写项目空档时间较长，很多基础知识都给忽略了，在给 dispatch 传递参数的时候，直接就用形参的形式传递了参数：

this.$store.dispatch('showA', id);

虽然结果证明可以生效，因为底层包装的时候就是将第二个参数以对象形式传递的，但是当多个参数的时候不确定会不会出错，并没有试验，这里只给出官方文档的写法，毕竟用了这个框架，就按照标准来：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})
// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

3. 如果一个组件，多次在其他组件中出现，是否每次都要 import 引入一遍呢？

当然可以每次都引入，不过还有一种更简单的方法，就是将这个组件用 vue 扩展的方式封装，然后就可以像使用 vuex 或者 vue-router 一样，在每个组件中直接使用了。

  1. 封装扩展
    首先写一个组件，不用导出组件，直接写结构和样式即可：
<template>
    <div class="loading">
        <div class="loading-inner">
            <div class="ball-spin-fade-loader">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .loading{
        position: fixed;
        z-index: 1000;
        width:100%;
        height:90px;
    }
    .loading-inner{
        display:flex;
        display: flex;
        height: 100px;
        align-items: center;
        justify-content: center;
    }
    @-webkit-keyframes ball-spin-fade-loader {
      50% {
        opacity: 0.3;
        -webkit-transform: scale(0.4);
                transform: scale(0.4); }

      100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1); } }

    @keyframes ball-spin-fade-loader {
      50% {
        opacity: 0.3;
        -webkit-transform: scale(0.4);
                transform: scale(0.4); }

      100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1); } }

    .ball-spin-fade-loader {
      position: relative; }
      .ball-spin-fade-loader > div:nth-child(1) {
        top: 25px;
        left: 0;
        -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
                animation: ball-spin-fade-loader 1s 0s infinite linear; }
      .ball-spin-fade-loader > div:nth-child(2) {
        top: 17.04545px;
        left: 17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
                animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
      .ball-spin-fade-loader > div:nth-child(3) {
        top: 0;
        left: 25px;
        -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
                animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
      .ball-spin-fade-loader > div:nth-child(4) {
        top: -17.04545px;
        left: 17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
                animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
      .ball-spin-fade-loader > div:nth-child(5) {
        top: -25px;
        left: 0;
        -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
                animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
      .ball-spin-fade-loader > div:nth-child(6) {
        top: -17.04545px;
        left: -17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
                animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
      .ball-spin-fade-loader > div:nth-child(7) {
        top: 0;
        left: -25px;
        -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
                animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
      .ball-spin-fade-loader > div:nth-child(8) {
        top: 17.04545px;
        left: -17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
                animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
      .ball-spin-fade-loader > div {
        background-color: #5477b2;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        position: absolute; }
</style>

  1. 为了将其封装为扩展，需要用到node组件的写法，即建立个入口文件，将组件导出，为此，结构目录长成这样：


  2. ok，现在来写index入口文件：
const LoadingComponent = require('./Loading.vue')
const loading = {
  install: function(Vue) {
    Vue.component('loading', LoadingComponent)
  }
}
module.exports = loading

require 是引入刚才写的组件，loading对象是封装 vue 扩展的写法，具体的可以参考文档，install 属性就是为了封装扩展而存在的，而 module.exports 是导出组件，遵循的是 commonJS 规范，想具体了解可以看看 nodeJS入门，了解下 nodeJS 组件的写法，理解这个就简单了。

  1. 接下来，我们就可以用这个封装好的 loading 效果扩展组件了：
// main.js
import Loading from './components/Loading' // 引入Loading.vue
Vue.use(Loading);  // 使用扩展
  1. 在任何组件中，都可以直接使用 loading 扩展，而不用 import 引入组件了：
// App.vue
<loading v-if="loading"></loading>

4. import 和 require 的使用场景：

由于 webpack 是模块加载器，所以在写 vue 的时候，使用 import 和 require 都可以，import 更多的是引入功能组件，并且用法灵活，而 require 就是引入文件。

  • 两者的用法其实取决于组件的封装形式；
  • 还有一种特殊情况，就是引入静态资源，例如CSS 或者 图片等，这时候就要用 require；
    两者是两种概念，放在一起比较难免不妥，只是有时候会混淆，建议看下 ES 6 中，import 的相关知识，就能看出和 require 的使用区别了。

虽然文章没啥技术含量，不过转载请注明出处，谢谢啦

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • awesome-android
    afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...
    passiontim阅读 15,617评论 2赞 45
  • 过往
    什么是过往？一幕幕回放 是曾经干瘪的钱囊，但斗志昂扬 是与时运的对抗 是入错的行 是鬼门关走一趟，惊出一身冷汗 是...
    王家子弟阅读 247评论 2赞 4
  • 在无戒写作训练营里，撑到今天的我在想什么
    二十分钟前我给无戒老师连续发了三条消息： “老师，”“美女老师，”“我要哭！！” 后面还想说一句:“日更让我好痛苦...
    JaryYang阅读 646评论 43赞 31
  • Day23
    我理想的早晨是这样度过的：六点起床，喝一杯温的蜂蜜水，清洁肠道之后看天气或慢跑20分钟或在家里做20分钟瑜伽。洗个...
    茉莉大大阅读 175评论 0赞 0