vuexまとめ

Vuexはstoreのインスタンスを作成し、対応する構成項目を構成することによって共通状態を管理します.
一、State:vuexの「data」
コンポーネントにvuexのstoreインスタンスを導入した後、store.state.属性によってvuexで統一的に管理されているデータにアクセスします.コンポーネントでvuexから状態を読み取る最も簡単な方法は、計算属性で、vuexの状態が変化すると計算属性が計算属性を再求め、domを更新することです.
storeのstateを使用する問題1:各コンポーネントが使用されるときにstoreを導入する必要があります.
解決:storeオプションをルートインスタンスに登録すると、このstoreインスタンスはルートコンポーネントの下にあるすべてのサブコンポーネントに注入され、this.$storeでアクセスされます.
問題2:1つのコンポーネントが複数のステータスを必要とする場合、複数の計算プロパティを定義する必要があり、煩雑です.
解決:補助関数mapStateを使用してインポートを統一できます.

//                Vuex.mapState

import { mapState } from 'vuex'

 

export default {

  // ...

  computed: mapState({

    //            

    count: state => state.count,

 

    //        'count'     `state => state.count`

    countAlias: 'count',

 

    //        `this`       ，        

    countPlusLocalState (state) {

      return state.count + this.localCount

    }

  })

}

             state          ，       mapState         。

computed: mapState([

  //    this.count   store.state.count

  'count'

])

　　
問題3:上記は全体的に属性を導入できるが,局所計算属性と混合して使用することはできない.
解決:オブジェクト展開演算子を使用して、上のmapStateの前に…を付けて、他の計算属性を書くと混用できます

computed: {

  localComputed () { /* ... */ },

  //                      

  ...mapState({

    // ...

  })

}

注意:vuexは状態の管理が便利ですが、すべてをvuexに入れる必要はありません.コードが冗長で直感的ではありません.共通の状態をvuexに入れることができます.
 
二、Getter:vuexの「computed」
storeのstateからいくつかの状態が派生した場合にgetterを使用できます.コンポーネントのcomputedに相当し、getterではstateを最初のパラメータとして受け入れます.

const store = new Vuex.Store({

  state: {

    todos: [

      { id: 1, text: '...', done: true },

      { id: 2, text: '...', done: false }

    ]

  },

  getters: {

    doneTodos: state => {

      return state.todos.filter(todo => todo.done)

    }

  }

})

 

//Getter         getter        

getters: {

  // ...

  doneTodosCount: (state, getters) => {

    return getters.doneTodos.length

  }

}

store.getters.doneTodosCount // -> 1

アクセス方法:
属性アクセス:storeをグローバルコンポーネントに挿入すると、this.$store.getters.doneTodosCountからstoreの計算属性にアクセスできます.
メソッドアクセス:getterに関数を返すことでgetterへのパラメータ伝達を実現

getters: {

  // ...

  getTodoById: (state) => (id) => {

    return state.todos.find(todo => todo.id === id)

  }

}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

改善:getterでもstateのような問題が発生し、vuexでも補助関数mapGetterが提供されます.
三、Mutation:vuexの「method」
stateで直接状態を変えないのはmutationを統一して使用することで状態の変化をよりよく追跡できるからです
構築中にstore.commit(vueのメソッド名)によってvuex統合管理を呼び出すメソッド
Mutationのメソッドの1つ目はstateで、2つ目はパラメータを入れることができ、アクセス時にcommitの2つ目は実パラメータを入れることができます
Mutationは同期の関数でなければなりません
コンポーネントでthis.$store.commit('xxx')を使用してmutationをコミットするか、mapMutations補助関数を使用してコンポーネント内のmethodsをstore.commit呼び出しにマッピングすることができます(ルートノードにstoreを注入する必要があります).
四、Action:mutationは同期の関数しかないので、actionが非同期の関数を実行する必要がある
アクションは、ステータスを直接変更するのではなく、mutationをコミットします.

const store = new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment (state) {

      state.count++

    }

  },

  actions: {

    increment (context) {

      context.commit('increment')

    }

  }

})

　　
context.commitを呼び出してmutationをコミットするか、context.stateとcontext.gettersでstateとgettersを取得できます.
 
コンポーネントでthis.$store.dispatch('xxx')を使用してactionを配布するか、mapActions補助関数を使用してコンポーネントのmethodsをstore.dispatch呼び出しにマッピングします(ルートノードにstoreを注入する必要があります).
Actionはpromiseによって複数のactionを組み合わせてより複雑な非同期プロセスを処理することができる
フォーム内の双方向バインド
フォームにバインドされているのは、計算プロパティが返すvuex storeに属するオブジェクトであると仮定し、ユーザーが入力するとvuexの状態を直接変更しようとしますが、一般的にはvuexの状態を直接変更することはできません.
方法1:mutationで修正する必要がある:   でvalueをバインドし、リスニングします.  input  または  changeイベント
　　

// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
//    mutation   ：

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

 
方法2:計算属性のsetでmutationを呼び出して現在の値を変更し、mutationで新しい値を取得して付与する
　　

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

 
転載先:https://www.cnblogs.com/wyongz/p/11125698.html