【vuex】

材料

シャン・シリコンバレービデオ: https://www.bilibili.com/video/BV1Zy4y1K7SH?p=108
公式ウェブサイト: https://v3.vuex.vuejs.org/zh/

インストール

注意：vue のバージョンは、vuex のバージョンとは 1 つのバージョンです。つまり、次のようになります。

• Vue2 は vuex3 を使用する必要があります
• Vue3 は vuex4 を使用する必要があります

まず、使用している vue のバージョンを確認します。プロジェクトpackage.jsonファイルを開いて、現在使用されている vue2 を確認します。そのため、

vuex3 コマンドをインストールするには vuex3 をインストールする必要があります。他のバージョンの場合は、以下のコマンドの 3 を置き換えてください。

npm install vuex@3

使用

クイックスタート

store App.vue と同じレベルに新しいディレクトリを作成します。

ストア ディレクトリに新しい Index.js ファイルを作成します。内容は次のとおりです。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    //类似vue中的data，时k-v键值对，如：
    //name:""
  },
  actions:{
    
    
  	//函数名一般使用驼峰命名法
  	//可以收到两个个参数：上下文信息、传的参数；一般调用commit在mutations中处理state中的数据，如：
  	//updateName(context, val) {
    
    
    //  context.commit('UPDATE_NAME')
    //}
  },
  mutations: {
    
    
	//一般使用大写字母命名
	//可以收到两个参数，state、传的参数；用于处理state中的数据，如：
	//UPDATE_NAME(state, val) {
    
    
    //  state.name = val
    //}
  },
  getters: {
    
    
    //类似vue的computed
	//可以收到两个参数：state、整个getters
	//getNameLength(state, getters) {
    
    
	//  return state.name.length;
	//}
  }
})

作成したばかりのファイルを に導入しますmain.js: (./store/index は ./store と省略できます)

基本的な使用法 (非モジュール式):

例：

たとえば、次のように置き換えて使用します/store/index.js。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    sum: 0
  },
  actions:{
    
    
  	add(context,val){
    
    
    	context.commit("ADD",val)
    }
  },
  mutations: {
    
    
    ADD(state,val){
    
    
        state.sum += val;
    },
})

そして、それを特定のモジュール (A モジュールとして示されます) のメソッドで使用します。

methods:{
    
    
  add(){
    
    
    this.$store.dispatch("add",this.optionVal)
  }
}

具体的なワークフロー:

もちろん、ロジックが比較的単純であれば、モジュールのメソッド内のミューテーション内のメソッドを直接呼び出すこともできますが、このときは $store.commit メソッドを呼び出す必要があります。
たとえば、上記の例では、モジュール A に置くと次のように記述できます。

this.$store.commit("ADD",this.optionVal)

ヘルパー関数

輸入

前提: 対応する関数を導入する必要があります: (どの関数を導入するためにどの関数を使用するか)

import {
    
    mapState, mapGetters, mapActions, mapMutations} from "vuex";

パラメータ

通常、mapXxx には 2 つのパラメータがあります。

• オブジェクト、おおよその対応関係は次のとおりです: (以下は文字列であり、省略できません)必要重命名に応じて適用可能
  
• 配列。上記のオブジェクトのキーと値が同じであることを意味します: (一重引用符に注意してください。)
  

地図の状態

以下の図の 3 つの方法の効果は同等です。

マップゲッター

以下の図の 3 つの方法の効果は同等です。

 // bigSum(){
    
    
 //     return this.$store.getters.bigSum
 // },

 // ...mapGetters(['bigSum']),

 ...mapGetters({
    
    
     bigSum:"bigSum"
 }),

マップの突然変異

以下の図の 3 つの方法の効果は同等です。

// ADD(){
    
    
//     this.$store.commit("ADD",this.optionVal)
// },

// ...mapMutations(["ADD"]),

...mapMutations({
    
    ADD:"ADD"}),

マップアクション

以下の図の 3 つの方法の効果は同等です。

// addIfOdd(){
    
    
//     this.$store.dispatch("addIfOdd",this.optionVal)
// },

//...mapActions(['addIfOdd']),

...mapActions({
    
    
    addIfOdd:'addIfOdd',
}),

モジュール性:

ステップ：

store/index.js を変更します

。mapXxx 補助関数を変更します。

• 最初のパラメータは名前空間で、これは次のとおりです。
  

• 2 番目のパラメータは、この記事の最初のパラメータと同じです使用> 基本使用> 。辅助函数

例：

大まかに処理を実行します。