关于前端:Vue-状态管理未来样子

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

随着 Vue 3 越来越受器重并成为默认版本，许多事件正在发生变化，生态系统逐步欠缺中。直到最近，Vue3 的状态治理默认举荐的是应用 Pinia。这节课，咱们依据我的项目的规模，摸索不同的状态治理形式，并尝试预测 Vue 中状态治理的将来会是什么样子。

在 options API 中，咱们能够应用 data() 选项为一个组件申明响应式数据。在外部，返回的对象被包在响应式帮忙器中。这个帮忙器也能够作为一个公共 API 应用。

如果是多个数据被多个实例共享的状态，那么能够应用 reactive()来创立一个 reactive 对象，而后从多个组件中导入它。

import {reactive} from "vue";

export const store = {
  state: reactive({heroes: ['Aragorn', 'Legolas', 'Gimli', 'Gandalf']
  }),
  addHero(hero) {this.state.heroes.push(hero);
  }
};

通过这种办法，数据被集中起来，并能够在各个组件之间重复使用。这可能是一个简略的抉择，对一个小的应用程序来说占用的空间最小。

一个相似的概念，即 composition API 带来的概念，是应用一个组合。这种模式在 React 那么十分风行，联合 Vue 弱小的响应性机制，能够编写一些优雅的、可重复使用的可组合，比方上面这些：

import {ref, computed} from "vue";
import fakeApiCall from "../api";

export default function useFellowship() {const heroes = ref([]);
  const loading = ref(false);

  async function init() {
    loading.value = true;
    heroes.value = await fakeApiCall();
    loading.value = false;
  }
  return {heroes: computed(() => heroes.value),
    loading: computed(() => loading.value),
    init
  };
}

而后，能够这样应用：

<template>
  <p v-if="loading">Loading...</p>
  <p v-else>Companions: {{heroes.join(",") }}</p>
</template>

<script>
import useFellowship from "../composables/useFellowship";
import {computed} from "vue";
export default {
  name: "MiddleEarth",
  setup() {const { heroes, loading, init} = useFellowship();
    init();
    return {heroes: computed(() => heroes.value),
      loading,
    };
  },
};
</script>

事例地址：https://codesandbox.io/s/composables-middle-earth-07yc6h?file…

这种模式最后是为了取代 mixins 而引入的，因为当初的组合比继承更受欢迎。但它也能够用来在组件之间共享状态。这也是许多为取代 Vuex 而呈现的库背地的次要想法。

Vuex 是不会隐没的。它反对 Vue 3，具备雷同的 API 和最小的破坏性变动（这可能是其余库应该留神的）。惟一的变动是，装置必须产生在一个 Vue 实例上，而不是间接装置在 Vue 原型上。

import {createApp} from 'vue'
import {store} from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

Vuex 4 仍在保护中。不过，不会再有很多新的性能被增加到它外面。如果你曾经有一个应用 Vuex 3 的我的项目，并想推延迁徙到其余货色上，这是一个不错的抉择。

Pinia 开始是一个试验，但很快就成为 Vue 3 的次要抉择。它提供了比 Vuex 更多的 API，有更好的架构和更直观的语法，充分利用了组合 API。

在开发工具的反对上（状态查看、带动作的工夫线和工夫旅行的能力），以及 Vuex 所提供的应用插件的扩展性，pinia 在设计上是类型平安和模块化的，这是应用 Vuex 时最大的两个痛点。

此外，定义 story 的语法与 Vuex 模块十分类似，这使得迁徙的工作量十分小，而在应用该 store 时，用到的 API，靠近于 Vue3 应用组合 API 的形式。

import {defineStore} from 'pinia'

export const useFellowship = defineStore('fellowship', {state: () => {return { heroes: ['Aragorn', 'Legolas', 'Gimli', 'Gandalf'] }
  },
  actions: {addHero(hero) {this.heroes.push(hero)
    },
  },
})

<script>
import {useFellowship} from '@/stores/fellowship'
export default {setup() {const fellowship = useFellowship()
    
    // 对状态的拜访 
    // 能够间接进行
    console.log(fellowship.heroes)
    
    // Using an action
    fellowship.addHero('Boromir')
  },
}
</script>

你可能曾经留神到的，最大的区别是 mutations 齐全隐没了 。它们通常被认为是极其简短的，而应用它们没有任何真正的益处。此外，也不再须要命名空间了。有了新的导入 store 的形式，所有的货色都被 设计成了命名空间。这意味着，在 Pinia 中，你没有一个带有多个模块的 store，而是有多个按需导入和应用的 store。

Pinia 反对另一种语法来定义 store。它应用一个定义响应式属性和办法的函数，并返回它们，与 Vue Composition API 的 setup 函数十分类似。

import {defineStore} from 'pinia'

export const useFellowship = defineStore('fellowship', () => {const heroes = ref([]);
  
  function addHero(hero) {heroes.value.push(hero)
  }
  return {
    heroes,
    addHero
  };
})

在 Setup Stores 中：

ref() 成为 state 属性
computed() 成为 getters
function() 成为 actions

Setup stores 比 Options Store 带来了更多的灵活性，因为能够在一个 store 内创立 watchers，并自在应用任何可组合的。

创立一个 fellowship store，它能够包容一个 heroes 列表，并能增加和删除对应的元素：

import {defineStore} from 'pinia'

export const useFellowship = defineStore('fellowship', {state: () => ({heroes: [],
    filter: 'all',
    // type will be automatically inferred to number
    id: 1
  }),
  getters: {aliveHeroes(state) {return state.heroes.filter((hero) => hero.isAlive)
    },
    deadHeroes(state) {return state.heroes.filter((hero) => !hero.isAlive)
    },
    filteredHeroes() {switch (this.filter) {
        case 'alive':
          return this.aliveHeroes
        case 'dead':
          return this.deadHeroes
        default:
          return this.heroes
      }
    }
  },
  actions: {addHero(name) {if (!name) return
      // Directly mutating the state!
      this.heroes.push({name, id: this.id++, isAlive: true})
    },
    killHero(name) {this.heroes = this.heroes.map((hero) => {if (hero.name === name) {hero.isAlive = false}
        return hero
      })
    },
    setActiveFilter(filter) {this.filter = filter}
  }
})

如果你相熟 Vuex，那么了解这段代码应该不是什么难事。

首先，每个 state 都须要一个作为命名空间的键。这里，咱们应用 fellowship。

state 是一个函数，保留这个 store 的所有响应性数据，getters 是拜访 store 外面的数据。state 和 getters 都与 Vuex 雷同。

但对于 actions 来说与 Vuex 差别比拟大。上下文参数曾经隐没了，actions 能够间接通过 this 拜访 state 和 getters。你可能曾经留神到的，actions 间接操作 state，这在 Vuex 中是被严格禁止的。

最初，因为状态操作当初是在 actions 进行的，所以 mutations 被齐全删除。

应用 pinia store 很简略:

<script>
import {useFellowship} from '../store/fellowship'
import HeroFilters from './HeroFilters'
export default {
  name: 'MiddleEarth',
  components: {HeroFilters},
  setup() {const fellowship = useFellowship()
    return {fellowship}
  }
}
</script>

<template>
  <div>
    <template v-if="fellowship.heroes.length">
      <HeroFilters />
      <ol>
        <li v-for="hero in fellowship.filteredHeroes" :key="hero.id">
          {{hero.name}} - {{hero.isAlive ? 'Alive' : 'Dead'}}
          <button v-if="hero.isAlive" @click="fellowship.killHero(hero.name)">Kill</button>
        </li>
      </ol>
    </template>
    <p v-else>Your fellowship is empty</p>
    <div>
      <input type="text" ref="heroName" />
      <input type="button" value="Add new hero" @click="fellowship.addHero($refs.heroName.value)" />
      <p>
        Sugestions:
        <button
          v-for="suggestion in ['Aragorn','Legolas','Gimli']"
          :key="suggestion"
          @click="fellowship.addHero(suggestion)"
        >
          {{suggestion}}
        </button>
      </p>
    </div>
  </div>
</template>

所有的逻辑都产生在 setup 函数中。导入的 useFellowship 钩子被执行并返回。这样在 template 就能够间接。

当然，这个组件应该被分解成更小的可重复使用的组件，但为了演示的目标，就先这样吧。

如果一个不同的组件须要拜访雷同的 state，能够用相似的形式来实现。

<script>
import {useFellowship} from '../store/fellowship'
export default {
  name: 'HeroFilters',
  setup() {const fellowship = useFellowship()
    return {fellowship}
  }
}
</script>

<template>
  <div>
    Filter:
    <div v-for="filter in ['all','dead','alive']" :key="filter">
      <input
        type="radio"
        :value="filter"
        :id="filter"
        @click="fellowship.setActiveFilter(filter)"
        v-model="fellowship.filter"
      />
      <label :for="filter">{{filter}}</label>
    </div>
  </div>
</template>

事例地址：https://codesandbox.io/s/pinia-playground-brgy58?file=/src/co…

Pinia 的文档很乐观，认为代码能够在库之间重复使用，但事实是，架构十分不同，必定须要重构。首先，在 Vuex 中，咱们有一个带有多个模块的 store，而 Pinia 是围绕着多个 store 的概念建设的。将这一概念过渡到 Pinia 中的最简略办法是，以前应用的每个模块当初都是一个 store。

此外，mutations 不再存在。相同，这些应该转换为间接拜访和扭转状态的操作。

Actions 不再承受上下文作为其第一个参数。它们应该被更新以间接拜访状态或任何其余上下文属性。这同样实用于 rootState、rootGetters等，因为繁多全局存储的概念并不存在。如果你想应用另一个 store，须要明确地导入它。

很显著，对于大型项目来说，迁徙将是简单和耗时的，但心愿大量的模板代码将被打消，store 将遵循一个更洁净和模块化的架构。革新能够一一模块进行，而不是一次性革新所有内容。实际上，在迁徙过程中，能够将 Pinea 和 Vuex 混合在一起，这种办法对于简单的我的项目来说也是不错的抉择。

预测将来并不容易，但就目前而言，Pinea 是最平安的赌注。它提供了一个模块化的架构，通过设计实现类型平安，并打消了模板代码。如果你要用 Vue 3 开始一个新的我的项目，Pinia 是值得举荐的抉择。

如果你曾经在应用 Vuex，你能够在迁徙到 Pinia 之前降级到第 4 版，因为这个过程看起来很简略，但须要大量的工夫。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

作者：Fotis Adamakis 译者：前端小智起源：mediun

原文：
https://fadamakis.medium.com/the-future-of-state-management-i…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:Vue-状态管理未来样子

响应式 API

组合

Vuex 4

Pinia

Pinia Setup Store

一个更理论的例子

从 Vuex 迁徙到 Pinia

总结

交换