研究18、VueX状態管理

VueXの状態管理

1.VueXとは

-Vuexは、Vue.js用に特別に設計された状態管理ライブラリです。

-Vuexは、一元化された方法を使用して、共有する必要のある状態を保存します

-Vuexの役割は、状態管理の実行、複雑なコンポーネント通信の解決、およびデータ共有です。

-Vuexはdevtoolsに統合されており、タイムトラベルタイムトラベル履歴ロールバック機能を提供します

  import Vue from' vue
  import Vuex from' vuex
  Vue.use (Vuex)
  export default new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      modules: {},
  })

  computed: {
    ...mapState({ num: 'count'，message: 'msg' })，
    ...mapGetters([ reverseMsg' ] )
  },
  methods: {
    ...mapMutations([ 'increate' ]),
    ...mapActions([ 'increateAsync' ])
  },

  $ store.commitを使用して、ミューテーションをトリガーします。

  $ store.dispatchを使用して、アクションをトリガーします。

 

次に、VueXをいつ使用するか

-必要な場合を除いてVuexを使用しないでください

-大規模なシングルページアプリケーション

  -複数のビューが同じ状態に依存している

  -異なるビューからのアクションは同じ状態を変更する必要があります

 

3、VueXプラグインの紹介

-VueXプラグインは単なる機能です

-この関数はストアパラメータを受け入れます

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    products,
    cart
  },
  plugins: [myPlugin]
})

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.type.startsWith('cart/')) {
      window.localStorage.setItem('cart-products', JSON.stringify(state.cart.cartProducts))
    }
  })
}