VUEXに来ること

まとめ:

Vuex is a state management pattern + library for Vue. js applications. It serves as a centralised store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Vuex 4の次のバージョンは、正式にリリースする前に、最終的な手順を介してその方法を作っている.このリリースではVue 3との完全な互換性をもたらすが、新機能を追加しません.Vuexは常に強力な解決策であり、Vueの州管理のための多くの開発者の最初の選択だったが、いくつかの開発者は、より多くのワークフローの問題に対処することを望んでいた.
Vue 3の出現とそれのcomposition API , 人々は手造りのシンプルな選択肢を探してきた.例えば、構成APIを使用するための比較的シンプルで柔軟で頑丈なパターンを示すprovide/inject 共有状態ストアを作成するにはこれと他の選択肢は、より小さなアプリケーションでのみ使用する必要があります.なぜなら、それらはコードについて直接ではないすべてのものを欠いているからですNuxt 統合、および開発ツール.

ストアの定義
VUEXストアで何かできる前に、1つを定義する必要があります.VUEX 4では、ストア定義は次のようになります.

import { createStore } from 'vuex'

export const counterStore = createStore({
  state: {
    count: 0
  },

  getters: {
    double (state) {
      return state.count * 2
    }
  },

  mutations: {
    increment (state) {
      state.count++
    }
  },

  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

各店舗には4つのパーツがあります.state データを保存します.getters 計算された状態を与えます.mutations は、状態を変異し、actions ストアに関連する何かを行うには、ストアの外部から呼び出されるメソッドがあります.通常、アクションはこの例が示すように突然変異をコミットしません.その代わりに、突然変異は同期しなければならないので、非同期タスクを行うために使用されます.あるいは、それらは単に複雑であるか多段階の機能性を実装します.

import { defineStore } from 'vuex'

export const counterStore = defineStore({
  name: 'counter',

  state() {
    return { count: 0 }
  },

  getters: {
    double () {
      return this.count * 2
    }
  },

  actions: {
    increment () {
      this.count++
    }
  }
})

の代わりにcreateStore , 使用するdefineStore . この違いは無視できますが、意味がある理由でそこにあります.次に、Aを提供する必要がありますname 私たちが前に必要としなかった店のために.過去には、モジュールは独自の名前を持っていましたが、モジュール自体が提供していませんでした彼らは、彼らが彼らを加えた親店によって割り当てられたただの名前でした.現在、モジュールはありません.代わりに、各モジュールは別のストアと名前があります.
その後、私たちはstate 初期状態を初期状態に戻す代わりに初期状態を返す関数.これはdata コンポーネントのオプション.私たちは書くgetters 私たちがVuex 4で行った方法に非常に似ていますが、代わりにstate 各ゲッターのパラメータとして使用することができますthis 国家に到達する.同じようにactions 心配する必要はないcontext 渡されるオブジェクトは、this すべてにアクセスする.最後にmutations . 代わりに、突然変異はactions .

店を始める
Vuex 4では、物事はVuex 3から変更されました、しかし、私はちょうどものが手に入らないようにするためにV 4を見ます.v 4では、あなたが呼んだときcreateStore , 既にインスタンス化します.その後、いずれかを介していずれかのアプリケーションでそれを使用することができますapp.use または直接:

import { createApp } from 'vue'
import App from './App.vue' // Your root component
import store from './store' // The store definition from earlier

const app = createApp(App)

app.use(store)
app.mount('#app')

// Now all your components can access it via `this.$store`
// Or you can use in composition components with `useStore()`

// -----------------------------------------------

// Or use directly... this is generally discouraged
import store from './store'

store.state.count // -> 0
store.commit('increment')
store.dispatch('increment')
store.getters.double // -> 4

これは、Vuex 5がV 4より少し複雑になるということです.各アプリケーションは、各アプリケーションは、それらの間のデータを共有せずに、同じ店の別のインスタンスを持つことができることを確認するVuexの別のインスタンスを取得することができます.あなたがアプリケーション間の店舗のインスタンスを共有する場合は、VUEXのインスタンスを共有することができます.

import { createApp } from 'vue'
import { createVuex } from 'vuex'
import App from './App.vue' // Your root component

const app = createApp(App)
const vuex = createVuex() // create instance of Vuex

app.use(vuex) // use the instance
app.mount('#app')

現在、すべてのコンポーネントはVUEXインスタンスにアクセスできます.あなたのストア(s)定義を直接与える代わりに、あなたがそれらを使用したいコンポーネントにそれらをインポートし、それらをインスタンス化して登録するために、vuexインスタンスを使用します

import { defineComponent } from 'vue'
import store from './store'

export default defineComponent({
  name: 'App',

  computed: {
    counter () {
      return this.$vuex.store(store)
    }
  }
})

呼び出し$vuex.store , VUEXインスタンスにストアをインスタンス化して登録します.その時点から、いつでも使用する$vuex.store そのストアでは、再びインスタンス化するのではなく、すでにインスタンス化されたストアを返します.を呼び出すことができますstore VUEXのインスタンスによって作成されたメソッドcreateVuex() .
今すぐあなたのストアは、コンポーネントを介してthis.counter . コンポーネントの構成APIを使用している場合は、useStore の代わりにthis.$vuex.store :

import { defineComponent } from 'vue'
import { useStore } from 'vuex' // import useStore
import store from './store'

export default defineComponent({
  setup () {
    const counter = useStore(store)

    return { counter }
  }
})

店を使う
ここでは、Vuex 4でストアを使用するように見えるものです.

store.state.count            // Access State
store.getters.double         // Access Getters
store.commit('increment')    // Mutate State
store.dispatch('increment')  // Run Actions

State , getters , mutations , and actions すべてのプロパティやメソッドを別の方法で処理されます.これは私が以前に賞賛した説明の利点を持っています、しかし、この明白さは本当に何も我々を得ません.
すべて-状態、ゲッターとアクション-それは簡単に多くの少ない冗長性を使用して、実際に使用するためのすべての必要性を削除するには、ストアのルートで直接利用可能ですmapState , mapGetters , mapActions and mapMutations オプションAPIの場合.

店舗の構成
今日のVUEX 5の最終的な側面は、作曲性です.VUEX 5には、単一のストアからアクセス可能な名前空間のモジュールがありません.それらのモジュールの各々は完全に別々の店に分割されるでしょう.v 4では、名前空間が全体を畳み込みますので、名前空間をcommit and dispatch 呼び出し、使用rootGetters and rootState 次に、getterとstateにアクセスする名前空間にあなたの方法を進めます.ここではどのようにVuex 5で動作します.

// store/greeter.js
import { defineStore } from 'vuex'

export default defineStore({
  name: 'greeter',
  state () {
    return { greeting: 'Hello' }
  }
})

// store/counter.js
import { defineStore } from 'vuex'
import greeterStore from './greeter' // Import the store you want to interact with

export default defineStore({
  name: 'counter',

  // Then `use` the store
  use () {
    return { greeter: greeterStore }
  },

  state () {
    return { count: 0 }
  },

  getters: {
    greetingCount () {
      return `${this.greeter.greeting} ${this.count}' // access it from this.greeter
    }
  }
})