Vuexとは何ですか？ Vuex 4 の初心者ガイド-Vue.js-php.cn

この記事では、Vuex について説明し、アプリケーションで Vuex を使用する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Vuexとは何ですか？ Vuex 4 の初心者ガイド

Vuex は、Vue.js エコシステムに不可欠なツールです。しかし、Vuex を初めて使用する開発者は、「状態管理パターン」などの用語に抵抗があり、実際に Vuex が必要なものについて混乱する可能性があります。 [関連する推奨事項: "vue.js チュートリアル "]

この記事は Vuex の紹介です。もちろん、Vuex の高度な概念についても説明し、Vuex の使用方法も説明します。アプリケーションで。

Vuex が解決する問題

Vuex を理解するには、まず Vuex が解決する問題を理解する必要があります。

マルチユーザーチャットアプリケーションを開発するとします。このインターフェイスには、ユーザーリスト、プライベートチャットウィンドウ、チャット履歴のある受信箱、および現在表示されていない他のユーザーからの未読メッセージをユーザーに通知する通知バーがあります。

毎日、何百万ものユーザーがアプリを通じて他の何百万ものユーザーとチャットしています。ただし、通知シェードが時々誤った通知を表示するという迷惑な問題について苦情を言う人もいます。ユーザーには新しい未読メッセージが通知されますが、ユーザーがそれを表示すると、それはすでに表示されたメッセージにすぎません。

この著者が説明しているのは、数年前に Facebook 開発者がチャットシステムで遭遇した実際の状況です。この問題を解決するために、開発者は "Flux" と呼ばれるアプリケーションアーキテクチャを作成しました。 Flux は、Vuex、Redux、およびその他の同様のライブラリの基礎を形成します。

Flux

Facebook 開発者は、しばらくの間「ゾンビ通知」の問題に取り組んできました。彼らは最終的に、その永続性が単なる欠陥ではなく、アプリケーションのアーキテクチャの根本的な欠陥を示していることに気づきました。

この欠陥は、抽象的に理解するのが最も簡単です。アプリケーション内にデータを共有する複数のコンポーネントがある場合、それらの相互接続の複雑さは、データの状態を予測または理解できない点まで増加します。したがって、アプリケーションを拡張または保守することはできません。

Flux はパターンであり、ライブラリではありません。 Github にアクセスして Flux をダウンロードすることはできません。 MVCに似たデザインパターンです。 Vuex や Redux などのライブラリは、他のフレームワークが MVC パターンを実装するのと同じ方法で Flux パターンを実装します。

実際、Vuex は Flux のすべてを実装しているわけではなく、サブセットのみを実装しています。しかし、今はそんなことは心配しないで、それが従う重要な原則を理解することに集中しましょう。

原則 1: 単一ソース

コンポーネントには、理解することのみが必要なローカルデータが含まれる場合があります。たとえば、ユーザーリストコンポーネント内のスクロールバーの位置は、他のコンポーネントから独立している場合があります。

ただし、コンポーネント間で共有されるデータ (つまり、アプリケーションデータ) は、それを使用するコンポーネントとは別の場所に保管する必要があります。

この 1 つの場所を「ストア」と呼びます。コンポーネントはこの場所からアプリケーションデータを読み取る必要があり、競合や相違を防ぐために独自のコピーを保持することはできません。

import { createStore } from "vuex";

// Instantiate our Vuex store
const store = createStore({

  // "State" 组件的应用程序数据
  
  state () {
    return {
      myValue: 0
    };
  }
});

// 组件从其计算的属性访问 state 
const MyComponent = {   
  template: "<div>{{ myValue }}</div>",
  computed: {
    myValue () {
      return store.state.myValue;
    }   
  } 
};

ログイン後にコピー

原則 2: データは読み取り専用です

コンポーネントは store から自由にデータを読み取ることができます。ただし、store のデータは、少なくとも直接的には変更できません。

代わりに、データを変更する意図を store に通知する必要があります。store は、mutation# と呼ばれる定義済みの関数セットを通過させる責任があります。 # #) 変更を加えます。

なぜこの方法を使用するのでしょうか?データ変更ロジックを一元化すると、ステータスに一貫性がない場合に、特定のファイルを個別に確認することなく、同じ場所で確認するだけで済みます。ランダムなコンポーネント (おそらくサードパーティのモジュール内) が予期しない方法でデータを変更する可能性を最小限に抑えます。

const store = createStore({ 
  state() { 
    return {
      myValue: 0
    };
  }, 
  mutations: { 
    increment (state, value) { 
      state.myValue += value;
    }
  } 
});
// 需要更新值吗？
// 错误的，不要直接更改 store 值
store.myValue += 10;
// 正确的，调用正确的 mutations。
store.commit(&#39;increment&#39;, 10);

ログイン後にコピー

原則 3: 変更は同期的である

アプリケーションがそのアーキテクチャに上記の 2 つの原則を実装している場合、データの不整合のデバッグがはるかに簡単になります。コミットをログに記録し、状態がどのように変化するかを監視できます (これは、Vue Devtools を使用する場合に実際に可能です)。

しかし、

mutation が非同期的に呼び出される場合、この機能は弱まります。送信の順序はわかっていますが、コンポーネントが送信する順序はわかりません。

同期

突然変異により、状態が予測不可能なイベントの順序やタイミングに依存しないことが保証されます。

とてもクールですが、Vuex とは一体何ですか?

これだけの背景知識があれば、最終的に問題を解決できます。Vuex は、Vue アプリケーションに Flux アーキテクチャを実装するのに役立つライブラリです。上記の原則を強制することにより、Vuex は、複数のコンポーネント間でデータが共有されている場合でも、アプリケーションデータを透過的で予測可能な状態に保ちます。

Vuex について概要を理解したところで、実際のプロジェクトで Vuex ベースのアプリケーションを作成する方法を見てみましょう。

Vuex を使用して To Do リストを作成する

Vuex の使用方法を示すために、簡単な To Do アプリケーションをセットアップします。ここからコードの実例にアクセスできます。

示例地址：https://codesandbox.io/s/happ...

如果大家自己的电脑尝试一波，那么可以使用下面的命令：

vue create vuex-example

ログイン後にコピー

安装 Vuex

cd vuex-example
npm i -S vuex@4
npm run serve

ログイン後にコピー

创建一个 Vuex store

现在，创建 Vuex store，在项目中创建 src/store/index.js：

mkdir src/store
touch src/store/index.js

ログイン後にコピー

打开文件并导入createStore方法。此方法用于定义store及其特性。现在，我们导出该store ，以便在Vue应用中能访问它。

// src/store/index.js

import { createStore } from "vuex";

export default createStore({});

ログイン後にコピー

将 store 添加到 Vue 实例

为了可以从任何组件中访问 Vuex store，我们需要在主文件中导入 store 模块，并将store作为插件安装在主Vue实例上

// src/main.js

import { createApp } from "vue";
import App from "@/App";
import store from "@/store";

const app = createApp(App);

app.use(store);

app.mount("#app");

ログイン後にコピー

创建一个简单的应用程序

如上所述，Vuex 的重点是通常在大型应用程序中创建可扩展的全局状态。但是，我们可以在一个简单的待办应用程序中演示其功能。

完成后效果如下所示：

Vuexとは何ですか？ Vuex 4 の初心者ガイド

现在，删除 HelloWorld 文件：

rm src/components/HelloWorld.vue

ログイン後にコピー

TodoNew.vue

现在，添加一个新组件 TodoNew，它负责创建新的待办事项。

touch src/components/TodoNew.vue

ログイン後にコピー

打开 TodoNew.vue 并输入以下内容：

// src/components/TodoNew.vue

<template>
  <form @submit.prevent="addTodo">
    <input
      type="text"
      placeholder="Enter a new task"
      v-model="task"
    />
  </form>
</template>

ログイン後にコピー

现在转到组件定义，有两个局部状态属性-task和给新待办事项提供唯一标识符的id。

// src/components/TodoNew.vue

<template>...</template>
<script>
export default {
  data() {
    return {
      task: "",
      id: 0
    };
  },
  methods: {
    addTodo: function() {
      //
    }
  }
};
</script>

ログイン後にコピー

定义 store 状态

过会，我们会创建一个显示待办事项的组件。由于它和TodoNew组件都需要访问相同的数据，因此这是我们在 Vuex 存储中保存的全局state 的理想选择。

现在，回到state并定义属性状态。这里使用 Vux4 提供的 createStore 函数，该函数返回一个对象。该对象具有一个属性 todos，它是一个空数组。

// src/store/index.js
import { createStore } from "vuex";

export default createStore({
  state () {
    return {
      todos: []
    }
  }
});

ログイン後にコピー

定义 mutation

从原则2可以知道，Vuex state 不能直接更改，需要定义mutator函数。

现在，我们向store添加一个mutation属性，并添加一个函数属性addTodo。所有mutator方法第一个参数。第二个可选参数是 store，第二个是传递的数据。

// src/store/index.js

import { createStore } from "vuex";

export default createStore({
  state () {
    return {
      todos: []
    }
  },
  mutations: {
    addTodo (state, item) {
      state.todos.unshift(item);
    }
  }
});

ログイン後にコピー

使用 commit 调用 `mutation`

现在，可以在TodoNew组件中使用它，在 TodoNew组件定义一个addTodo方法。

要访问store ，我们可以使用全局属性this.$store。使用commit方法创建一个新的mutation。需要传递了两个参数-首先是mutation的名称，其次是我们要传递的对象，是一个新的待办事项（由id和task值组成）。

// src/components/TodoNew.vue
methods: {
  addTodo: function() {
    const { id, task } = this;
    this.$store.commit("addTodo", { id, task });
    this.id++;
    this.task = "";
  }
}

ログイン後にコピー

回顾

到目前为止：

用户将待办事项通过输入框输入，并绑定到 task 变量。
提交表单后，将调用addTodo方法
创建一个待办事项对象并将其“提交”到store中。

// src/components/TodoNew.vue
<template>
  <form @submit.prevent="addTodo">
    <input
      type="text"
      placeholder="Enter a new task"
      v-model="task"
    />
  </form>
</template>
<script>
export default {
  data() {
    return {
      task: "",
      id: 0
    };
  },
  methods: {
    addTodo: function() {
      const { id, task } = this;
      this.$store.commit("addTodo", { id, task });
      this.id++;
      this.task = "";
    }
  }
};
</script>

ログイン後にコピー

读取 store 数据

现在，我们已经创建了用于添加待办事项的功能。接下来，就是把它们显示出来。

创建一个新组件TodoList.vue 文件。

touch src/components/TodoList.vue

ログイン後にコピー

内容如下：

// src/components/TodoList.vue
<template>
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.description }}
  </li>
</ul>
</template>

ログイン後にコピー

todos是一个计算属性，我们在其中返回Vuex store 的内容。

// src/components/TodoList.vue

<script>
export default {
  computed: {
    todos() {
      // 
    }
  }
};
</script>

ログイン後にコピー

定义 getters

与直接访问store 内容不同，getter是类似于存储的计算属性的函数。在将数据返回到应用程序之前，这些工具非常适合过滤或转换数据。

例如，下面有getTodos，它返回未过滤的状态。在许多情况下，可以使用filter或map来转换此内容。

todoCount返回todo数组的长度。

通过确保组件愿意保留数据的本地副本，getter有助于实现原则1，即单一数据来源。

// src/store/index.js

export default createStore({
  ...
  getters: {
    getTodos (state) {
      return state.todos;
    },
    todoCount (state) {
      return state.todos.length;
    }
  }
})

ログイン後にコピー

返回TodoList组件，我们通过返回this.$store.getters.getTodos来完成功能。

// src/components/TodoList.vue

<script>
export default {
  computed: {
    todos() {
      return this.$store.getters.getTodos;
    }
  }
};
</script>

ログイン後にコピー

App.vue

要完成此应用程序，现在要做的就是导入并在App.vue中声明我们的组件。

// src/App.vue

<template>
  <p>
    <h1>To-Do List</h1>
    <p>
      <TodoNew />
      <TodoList />
    </p>
  </p>
</template>
<script>
import TodoNew from "@/components/TodoNew.vue";
import TodoList from "@/components/TodoList.vue";

export default {
  components: {
    TodoNew,
    TodoList
  }
};
</script>

ログイン後にコピー