稍作折腾，从零开始用 Vue.js 做了个小项目，算是方便了一点自己的生活吧2333

Vue Router 路由管理器

一个示例：

1
2
3
4
5
6
{
    path: '/xxx/:propOne',
    name: 'xxx',
    component: () => import('../views/xxx.vue'),
    props: true
}

Vuex 中央数据管理

有一些要在多个视图（Views）里面用到并都能做出修改的数据就丢到 Vuex 里面吧，不然会遇到一堆父传子子传父的「伪双向绑定」问题。

在 src/store/index.js 里面作出如下头部配置：

1
2
3
4
5
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

主配置项：

1
2
3
4
5
6
7
8
9
10
11
export default new Vuex.Store({
  state: {
    sharedData: []
  },
  mutations: {
    addSomethingToData (state, newData) {
      state.sharedData.push(newData)
    }
  },
  // ...
})

在 .vue 中使用共享的数据：

1
2
3
4
5
import { mapState } from 'vuex'
// ...
computed: {
    ...mapState(['sharedData'])
}

数据永久性存储

借助 vuex-persistedstate 插件实现。

1
npm install -S vuex-persistedstate

在 store/index.js 中：

1
2
3
4
5
6
import createPersistedState from "vuex-persistedstate"
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

默认是存在 localStorage 里头的，关了浏览器照样存着。如果只是临时用用的数据，可以考虑存到 sessionStorage 中，具体方法参见位于 NPM 的项目主页。

环境变量

变量名要以 VUE_APP_ 打头，丢在根目录下 .env.development.local 之类的文件里面。

引用方式：process.env.VUE_APP_VARNAME

站点标题

在项目根目录下创建 vue.config.js 文件，并写入：

1
2
3
4
5
6
7
8
9
10
module.exports = {
  chainWebpack: (config) => {
    config
      .plugin('html')
      .tap((args) => {
        args[0].title = '站点标题'
        return args
      })
  }
}

数据导入/导出

导出是先把一个 Array of Objects 编码成 JSON 格式字符串（JSON.Stringify()），再把该字符串编码成 Base64 格式（window.btoa()）并输出。

导入则读入一个 Base64 字符串、解码成 JSON 字符串（window.atob()），再 parse 这个字符串至一个 Array of Objects （JSON.parse()）并覆写存储在 Vuex 中的数据（this.$store.commit('Replacer', decodedArray)）。

window.btoa() 接收的字符串不能含有非拉丁字母

看 JSON.stringify and unicode characters 的第一个回复，引用如下：

1
2
3
4
var json = JSON.stringify(obj)
json = json.replace(/[\u007F-\uFFFF]/g, function(chr) {
    return "\\u" + ("0000" + chr.charCodeAt(0).toString(16)).substr(-4)
})

JavaScript 代码片段

许可协议

All Rights Reserved.