您可能不需要使用Vue 3的Vuex

原创

人生代码_公众号 2021-07-14 10:24:40 ©著作权

文章标签 Vue 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者人生代码_公众号的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vuex是一个很棒的状态管理库。它很简单，并且可以与Vue很好地集成。为什么有人会离开Vuex？原因可能是即将发布的Vue 3版本暴露了底层的反应系统，并引入了构建应用程序的新方法。新的反应系统非常强大，可以用于集中式状态管理。

您是否需要共享状态？

在某些情况下，多个组件之间的数据流变得如此困难，以至于您需要集中式状态管理。这些情况包括：

使用相同数据的多个组件具有数据访问权限的多个根组件的深层嵌套如果以上情况都不成立，那么不管您是否需要，答案都很简单。不用了

但是，如果您有以下一种情况呢？最直接的答案是使用Vuex。这是经过考验的解决方案，并且做得不错。

但是，如果您不想添加其他依赖项或发现设置过于复杂怎么办？新的Vue 3版本以及Composition API可以通过其内置方法解决这些问题。

新的解决方案

共享状态必须符合两个条件：

反应性：当状态改变时，使用它们的组件也应更新可用性：可以在任何组件中访问状态反应性 Vue 3通过众多功能公开了其反应系统。您可以使用reactive函数创建反应变量（替代方法是ref函数）。

import { reactive } from 'vue';

export const state = reactive({ counter: 0 });

从reactive函数返回的Proxy对象是可以跟踪其属性更改的对象。当在组件模板中使用时，每当无功值发生变化时，组件都会重新渲染自己。

<template>
  <div>{{ state.counter }}</div>
  <button type="button" @click="state.counter++">Increment</button>
</template>

<script>
  import { reactive } from 'vue';

  export default {
    setup() {
      const state = reactive({ counter: 0 });
      return { state };
    }
  };
</script>

可用性

上面的示例对于单个组件非常有用，但是其他组件无法访问状态。为了克服这个问题，您可以使用provide和inject方法在Vue 3应用程序中提供任何可用值。

import { reactive, provide, inject } from 'vue';

export const stateSymbol = Symbol('state');
export const createState = () => reactive({ counter: 0 });

export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
  stateSymbol, 
  createState()
);

当您将Symbolas键和一个值传递给该provide方法时，该方法中的任何子组件都可以使用该值inject。Symbol提供和检索值时，密钥使用相同的名称。

您可能不需要使用Vue 3的Vuex_Vue

这样，如果您在最上面的组件上提供值，那么它将在所有组件中可用。或者，您也可以调用provide主应用程序实例。

import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';

const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');

<script>
  import { useState } from './state';

  export default {
    setup() {
      return { state: useState() };
    }
  };
</script>

使其坚固

上述解决方案有效，但有一个缺点：您不知道是谁修改了什么。状态可以直接更改，没有限制。

您可以通过使用readonly函数包装状态来使其受到保护。它在Proxy防止任何修改的对象中覆盖了传递的变量（尝试时会发出警告）。可以通过可访问可写存储的单独功能来处理突变。

import { reactive, readonly } from 'vue';

export const createStore = () => {
  const state = reactive({ counter: 0 });
  const increment = () => state.counter++;

  return { increment, state: readonly(state) };
}

外部世界将只能访问只读状态，并且只有导出的函数才能修改可写状态。

通过保护状态免受不必要的修改，新解决方案相对接近Vuex。