Трюки Vue (часть 6): создание магазинов без Vuex в Vue.js 2.6

Оригинальный адрес:Creating a Store without Vuex in Vue.js 2.6

Оригинальный автор:Alex Jover

Переводчик:Дядя Программист Он

Специальная оговорка: эта статья является авторомAlex JoverОпубликовано вVueDoseряд выше.

Авторские права принадлежат автору.

Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.

Чтобы не мешать всеобщему прочтению, разрешенные записи будут размещены в конце этой статьи.

Vue.js 2.6 представляет несколько новых функций, одна из которых мне нравится — это глобальный API:Vue.observable

Теперь вы можете создавать реактивные объекты вне области действия компонента. И когда вы используете их в компоненте, он будет запускать соответствующее обновление рендеринга при его изменении.

Исходя из этого, вы можете создать простое хранилище без vuex, которое очень подходит для некоторых простых сценариев, например, когда нужно только разделить внешнее состояние между компонентами.

В качестве примера давайте теперь создадим простой калькулятор, который предоставляет состояние для нашего хранилища.
Сначала создайтеstore.jsдокумент:

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

Если вам знакома и нравится идея дизайна мутаций и действий, то вы также можете создать простую функцию для обновления данных:

import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

Теперь вам просто нужно использовать его в своем компоненте, чтобы получить состояние, как и в случае с Vuex, мы будем использовать вычисляемые свойства и вызывать метод экземпляра мутации.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="setCount(count + 1);">+ 1</button>
    <button @click="setCount(count - 1);">- 1</button>
  </div>
</template>

<script>
  import { store, mutations } from "./store";

  export default {
    computed: {
      count() {
        return store.count;
      }
    },
    methods: {
      setCount: mutations.setCount
    }
  };
</script>

Если вы хотите попробовать этот пример для себя, у меня естьCodeSandboxСкомпилировано, давайте посмотрим!

Вы можете прочитать это онлайноригинальный, исходный код которого доступен для копирования и вставки. Если вам понравилась эта серия, поделитесь ею с коллегами!

Эпилог

Другие статьи из этой серии будут синхронизированы с выпуском официального сайта серии и будут своевременно переведены и опубликованы в Nuggets. Пожалуйста, продолжайте следить"Программа Обезьяны, дядя Хе", я верю, что принесу вам больше качественного контента, не забудьте поставить лайк~

Если вы хотите узнать больше о переводчике, проверьте следующее:

личный блог:blog.hadesz.com
Персональный репозиторий на гитхабе:github.com/hadeshe93
Личный публичный аккаунт WeChat: поиск «Дядя Он, программист»

Запросить запись авторизации перевода

微信公众号
Если вы считаете, что эта статья хороша, поделитесь ею с друзьями~