Vue.jsのvuex（状態管理）

今回は Vue.js の vuex (状態管理) についてご紹介します。Vue.js の vuex (状態管理) を使用する際の注意点は次のとおりです。 vuex は redux に似た状態管理ツールです。

vuex をインストールします

npm install vuex --save

Vuex の状態管理ストレージは応答します。つまり、コンポーネントが Vuex の特定の状態を使用するとき、それが変化すると、に関連付けられているすべてのコンポーネントは、対応するデータを自動的に更新します。

Vuex のステータスを直接変更することはできません。Vuex のステータスを変更する唯一の方法は、変更を達成するためにミューテーションを送信することです

上で示したように、Vuex は Vue コンポーネントの完全なエコシステムを確立しています。開発を含む API 呼び出しのリンク。このエコシステムを中心に、コア プロセスの各モジュールの主な機能を簡単に紹介します。

Vue コンポーネント: Vue コンポーネント。 HTML ページでは、ユーザー操作などのインタラクティブな動作を受け取り、ディスパッチ メソッドを実行して対応する

アクション

をトリガーして応答する役割を果たします。 dispatch: 操作動作トリガーメソッドは、アクションを実行できる唯一のメソッドです。

actions: 操作動作処理モジュール。 Vue コンポーネントによって受信されるすべてのインタラクションの処理を担当します。同期/非同期操作が含まれ、同じ名前の複数のメソッドをサポートし、登録された順序でそれらをトリガーします。バックエンド API へのリクエストは、他のアクションのトリガーや変更の送信など、このモジュールで実行されます。このモジュールは、アクション チェーンのトリガーをサポートする Promise カプセル化を提供します。

commit: ステータス変更の送信操作メソッド。ミューテーションを実行する唯一の方法は、ミューテーションを送信することです。

mutations: 状態変更操作メソッド。これは、Vuex で状態を変更する唯一の推奨方法です。

他の変更方法

は、厳密モードでエラーを報告します。このメソッドは同期操作のみを実行でき、メソッド名はグローバルに一意のみにすることができます。一部のフックは状態監視などのために操作中に公開されます。 state: ページ状態管理コンテナ オブジェクト。データ オブジェクトの分散データを Vue コンポーネントに一元的に保存し、グローバルに一意に統合して状態を管理します。ページ表示に必要なデータはこのオブジェクトから読み取られ、Vue のきめ細かいデータ応答メカニズムが効率的なステータス更新に使用されます。

getter: 状態オブジェクトの読み取りメソッド。このモジュールは図では個別にリストされていません。Vue コンポーネントはこのメソッドを通じてグローバル状態オブジェクトを読み取ります。

main.jsファイルのコードは次のとおりです

import Vue from 'vue'import App from './App.vue'import 'jquery'import VRouter from 'vue-router'//导入vueximport Vuex from 'vuex'import Apple from './components/apple.vue'import Banana from './components/banana.vue'// 全局使用路由Vue.use(VRouter)// 设置全局Vue.use(Vuex)// 实例化Vuexlet store = new Vuex.Store({  state: {    totalPrice: 0
  },  getters: {
    getTotal (state) {      return state.totalPrice
    }
  },  mutations: {
    increment (state, price) {
      state.totalPrice += price
    },
    decrement (state, price) {
      state.totalPrice -= price
    }
  },  // actions是在mutations之前的动作,只能调用mutations,不能调用state
  // 其实actions也可以理解为中介
  // actions 和  mutations的区别:
  // actions: 是异步的操作,再去触发mutations
  // mutations: 是同步的操作
  actions: {
    increase (context, price) {
      context.commit('increment', price)
    }
  }
})// 实例化routerlet router = new VRouter({
......
})/* eslint-disable no-new */new Vue({  el: '#app',
  router,
  store,//设置全局
  template: &#39;<App/>&#39;,  components: { App }
})

apple.vueのコードは次のとおりです:

<template>
  <div class="hello">
    <h1 id="msg">{{msg}}</h1>
    <button @click="addOne">add one</button>
    <button @click="minusOne">minus one</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am apple&#39;,        price: 5
      }
    },    methods: {
      addOne () {        //使用了vuex的actions
        this.$store.dispatch(&#39;increase&#39;, this.price)
      },
      minusOne () {        //未使用vuex的actions
        this.$store.commit(&#39;decrement&#39;, this.price)
      }
    }
  }</script>

banana.vueのコードは次のとおりです:

<template>
  <div class="hello">
    <h1 id="msg">{{msg}}</h1>
    <button @click="addOne">add one</button>
    <button @click="minusOne">minus one</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am banana&#39;,        price: 15
      }
    },    methods: {
      addOne () {        //未使用vuex的actions
        this.$store.commit(&#39;increment&#39;, this.price)
      },
      minusOne () {        //未使用vuex的actions
        this.$store.commit(&#39;decrement&#39;, this.price)
      }
    }
  }</script>

ディスプレイインターフェースアプリ内.vue ファイル

<template>
  <div id="app">
    ![](./assets/logo.png)
    {{ totalPrice }}    <apple></apple>
    <banana></banana>
  </div></template><script>
  import Apple from &#39;./components/apple.vue&#39;
  import Banana from &#39;./components/banana.vue&#39;
  export default {    components: {
      Apple,
      Banana
    },    //计算属性
    computed: {
      totalPrice () {//        return this.$store.state.totalPrice
        return this.$store.getters.getTotal
      }
    }
  }</script>

信じてください。この記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.js ルーティングのその他の操作

Vue.js ルーティング パラメーター

以上がVue.jsのvuex（状態管理）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。