实现 Vue 的简单store模式

需求描述

使用官方建议的简单store模式实现父组件和兄弟子组件的数据通信，保证状态统一。实现是参考网上比较多的一个例子，通过store保存年龄，并在组件中触发修改和共享。

实现

person.js

const Person = {
  debug: true,
  state: {
    age: 6,
  },
  setAge(newVal) {
    if (this.debug) console.log('setAge triggered with ', newVal);
    this.state.age = newVal;
  },
};
export default Person;

a.vue 和 b.vue

<template>
  <div class="container">
    <input type="text" v-model="state.age">
    <button @click="changeAge(state.age)">改变年龄</button>
    <p>Age:{{state.age}}</p>
  </div>
</template>

<script>
import { Person } from "@/store/person.js";
export default {
  name: "a",
  data() {
    return {
      state: Person.state,
    };
  },
  methods: {
    changeAge(age) {
      Person.setAge(age);
    },
  },
};
</script>

遇到的问题

由于之前没有充分使用模块相关语法，发现了一些问题。

网上的例子多是使用默认导出。之前一直以为 export 语句只要位于顶级作用域就够了，尝试后发现如果使用默认导出会有顺序的要求，即 export default 后面如果跟的是标识符表达式，则标识符代表的值必须定义在 export 语句之前，如下：

// export default Person; // 在 Person 定义之前导出，则导入的模块或Vue的组件只能获取到 undefined
const Person = { ... }
export default Person; // Person 必须在之前定义
// export default { ... } // 若是使用匿名变量导出则直接跟在 default 之后即可

因此，为避免潜在的问题，可以始终在模块末尾导出，包括默认导出和批量导出

ES6 导出导入语法总结

这里总结了 ES6 中模块导出导入相关的语法，有兴趣可以浏览一下：
https://www.cnblogs.com/cjc-0313/p/16198572.html