用 vuex-pathify 驯服 Vuex 野兽

至于流程架构的实现,Vue.js的Vuex是最简单,但最优雅的之一,然而,它仍然可以更好。试图记住在你的商店中写出每一个财产的变异和变异似乎有点不必要的认知过度。为什么我们需要手动地图获得,变异和行动?什么是承诺和发送的区别?Dave Stewart的vuex-pathify试图通过提供Vuex功能的简单包装器来减少所有这种心理过度,并依靠惯例来减少锅炉板。

本文假设您已经安装了 Vuex 的 Vue.js 项目,并且您知道它如何工作的基本知识。

安裝Viexex-Pathify

首先,继续安装Pathify,并在您的Vuex商店配置中启用它作为插件。

1$ npm install --save vuex-pathify

然后在您的商店中启用插件。

 1[label main.js (example)]
 2import Vue from 'vue';
 3import Vuex from 'vuex';
 4// If you want to configure pathify, this import will be different.
 5// See the "Configuring Pathify" section below.
 6import pathify from 'vuex-pathify';
 7import App from './App.vue';
 8
 9Vue.use(Vuex);
10
11// Usual Vuex stuff. Normally not in the main file.
12const state = {};
13const getters = {};
14const mutations = {};
15const actions = {};
16const actions = {};
17
18const store = new Vuex.Store({
19  // Enable the vuex-pathify plugin.
20  plugins: [pathify.plugin],
21
22  state,
23  getters,
24  mutations,
25  actions,
26  modules,
27});
28
29new Vue({
30  store,
31  render: h => h(App)
32}).$mount('#app');

比较

所以现在的问题是......什么是vuex-pathify?

正常视觉

为了说明这一点,让我们看看一个基本的Vuex设置. 只是一个微小的表格,允许您通过双向数据绑定来编辑您的姓氏和姓氏。

 1[label main.js]
 2import Vue from 'vue';
 3import Vuex from 'vuex';
 4import App from './App.vue';
 5
 6Vue.use(Vuex);
 7
 8const state = {
 9  firstName: 'Richard',
10  lastName: 'Gator'
11};
12
13// We need these to be able to access
14// their values outside of the store module.
15const getters = {
16  firstName: state => state.firstName,
17  lastName: state => state.lastName
18};
19
20// We use these to update the values of the store.
21const mutations = {
22  SET_FIRST_NAME: (state, firstName) => {
23    state.firstName = firstName
24  },
25  SET_LAST_NAME: (state, lastName) => {
26    state.lastName = lastName
27  }
28};
29
30const store = new Vuex.Store({
31  state,
32  getters,
33  mutations
34});
35
36Vue.config.productionTip = false;
37
38new Vue({
39  store,
40  render: h => h(App)
41}).$mount('#app');

 1[label App.vue]
 2<template>
 3  <div id="app">
 4    <h2>Your Name Is: {{firstName}} {{lastName}}</h2>
 5    <form>
 6      <label>
 7        First Name
 8        <input type="text" v-model="firstName"/>
 9      </label>
10      <label>
11        Last Name
12        <input type="text" v-model="lastName"/>
13      </label>
14    </form>
15  </div>
16</template>
17
18<script>
19
20export default {
21  name: 'app',
22  computed: {
23    // We have to create computed getters and setters for both properties
24    // to be able to use them in v-model.
25    // Quite a pain for larger forms, wouldn't you say?
26    firstName: {
27      get() { return this.$store.getters.firstName },
28      set(val) { this.$store.commit('SET_FIRST_NAME', val) }
29    },
30    lastName: {
31      get() { return this.$store.getters.lastName },
32      set(val) { this.$store.commit('SET_LAST_NAME', val) }
33    }
34  }
35}
36</script>

你必须创建状态,添加变异,突变和计算的属性,将它们全部结合在一起。

《Viexe-Pathify》

让我们看看与vuex-pathify相同的事情。

 1[label main.js]
 2import Vue from 'vue';
 3import Vuex from 'vuex';
 4import pathify from 'vuex-pathify';
 5import { make } from 'vuex-pathify';
 6import App from './App.vue';
 7
 8Vue.use(Vuex);
 9
10const state = {
11  firstName: 'Richard',
12  lastName: 'Gator'
13};
14
15// You don't even need getters, pathify will use the store data directly!
16// Though if you want, it can generate them for you with `make.getters(state)`
17
18// Same for mutations and actions. (Uses the SET_* format, but this is configurable.)
19const mutations = make.mutations(state);
20
21const store = new Vuex.Store({
22  // Don't forget the plugin!
23  plugins: [pathify.plugin],
24  state,
25  mutations
26});
27
28Vue.config.productionTip = false;
29
30new Vue({
31  store,
32  render: h => h(App)
33}).$mount('#app');

 1[label App.vue]
 2<template>
 3  <div id="app">
 4    <h2>Your Name Is: {{firstName}} {{lastName}}</h2>
 5    <form>
 6      <label>
 7        First Name
 8        <input type="text" v-model="firstName"/>
 9      </label>
10      <label>
11        Last Name
12        <input type="text" v-model="lastName"/>
13      </label>
14    </form>
15  </div>
16</template>
17
18<script>
19import { sync } from 'vuex-pathify';
20
21export default {
22  name: 'app',
23  computed: {
24    // The sync helper creates two-way bindings for store data and mutations.
25    firstName: sync('firstName'),
26    lastName: sync('lastName'),
27    // We could reduce boilerplate even further using:
28    // ...sync(['firstName', 'lastName'])
29  }
30}
31</script>

看起来像对我来说是重复代码的显著减少!

机械师

在vuex-pathify的中心是路径系统和分辨率算法. 路径看起来像这样的东西:module/[email protected]

例如,使用此路径: 数据/用户/firstName,pathify 可以确定:

  • 所参照的模块是数据模块的用户子模块
  • 接口应该是数据/用户/firstName
  • 相关突变将是数据/用户/SET_FIRST_NAME
  • 相关操作将是数据/用户/setFirstName

如果您选择pathify.get('data/user/firstName'),那么pathify 会首先在data模块的user子模块中寻找一个ghetter,即firstName。

如果您打电话给‘pathify.set('data/user/firstName',‘Richard')’,那么Pathify 会首先在相关模块中查找一个‘setFirstName’操作,如果它不存在,则会查找一个‘SET_FIRST_NAME’突变,然后使用它。

pathify.sync('data/user/firstName') 允许您将这两种行为合并为一个单一的计算属性. 您可以使用 @ 语法访问其他子属性. 例如,如果您没有一个 user' 模块,但确实有 userData' 属性在 data' 模块上,您可以使用 pathify.sync('data/userData@firstName')' 相反,以相同的效果。

这允许您使用一致和简单的语法访问所有Vuex功能,而不是必须使用commit(),dispatch()等。

** 有关如何使用vuex-pathify的更多细节,请参阅 官方文件。

配置 Vuex-Pathify

上面的信息应该足以让您感兴趣,如果不是从vuex-pathify开始,但有一个事情你应该知道。配置模块是以一种略有不同的方式完成的。而不是使用传递给建设者的选项,在运行时,vuex-pathify是通过修改原型上的属性来配置的。

  1. 在源目录中创建一个名为 pathify.js 的新文件
  2. 导入 pathify 并修改配置值
  3. 重新导出 pathify 并在您的 vuex 模块中使用它

您可以更改的选项的完整列表可在这里(https://davestewart.github.io/vuex-pathify/#/setup/options)。

1[label pathify.js (New File)]
2// Import pathify.
3import pathify from 'vuex-pathify';
4
5// Mapping: /thing -> getter: thing, mutation: SET_THING, action: setThing
6options.mapping = 'standard'; // Default
7
8// Re-export pathify.
9export default pathify;

1[label main.js]
2...
3import pathify from './pathify'; // instead of from `vuex-pathify.
4...
Published At
Categories with 技术
Tagged with
comments powered by Disqus