10分vuex

Vuexグローバル統一された状態の管理、問題解決とデータがコンポーネント間のステータスの通信を共有します。

第一歩

store.js

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

Vue.use(Vuex) // 使用插件
// 导出store实例
export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})
复制代码

第二のステップ

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store, // 增加store属性，值是导出store的实例
  render: h => h(App)
}).$mount('#app')

复制代码

上記二つのステップにより、各成分が有する$store特性を、それは我々が作成した容器です。ありcommit、dispatch、state、getters、actions、mutations各構成要素にすることができ、this.$storeプリントアウトを見てください。

開始

定義された状態

export default new Vuex.Store({
  state: {
	count: 1 // state中定义响应式的数据
  }
})
复制代码

状態を使用：でストアをstate定義された状態count、アセンブリで使用することができるthis.$store.state.count取得しました。

---

定義された変異

店舗でmutations対応を添加する方法

export default new Vuex.Store({
  state: {
	count: 1 // state中定义响应式的数据
  },
  mutations: {
	addTen (state, num) {
		state.count = state.count + num
	}
  },
  actions: {

  }
})
复制代码

変異を提出することにより、アセンブリcommit提出mutations変更するstate状態を

this.$store.commit('addTen', 10)
复制代码

---

定義されたアクションの店舗でactions対応を添加する方法

export default new Vuex.Store({
  state: {
	count: 1
  },
  mutations: {
	addTen (state, num) {
		// 第一个参数是状态，第二个是传入的参数
		state.count = state.count + num
	}
  },
  actions: {
	minusTen ({commit}, num) {
		// 第一个参数是store实例，第二个是传入的参数
		setTimeout(() => {
			commit('addTen', num)
		}, 1000)
	}
  }
})
复制代码

アクション分布を使用することができる成分をdispatchトリガーするアクションを分配するactions方法は、actions非同期提出することができるmutations変更するstate状態を

this.$store.dispatch('minusTen', 10)
复制代码

actions実の修正された状態に主に多重化、等パッケージコード、非同期処理、リクエストインタフェース、mutations処理

---

ゲッターが定義されているの店舗でgetters対応を添加する方法

export default new Vuex.Store({
  state: {
	count: 1,
	person: {
		name: '张三'
	}
  },
  getters: {
	getName (state) {
		// getters是同步的
		return state.person.name
	}
  }
})
复制代码

使用ゲッター

this.$store.getters.getName
复制代码

getters対応するで定義された計算属性に対応する定義された方法computedと同じでは、依存関係の変化が再計算があります。

コンポーネントのコードのデモ

<template>
  <div class="hello">
    <h1>{{ this.$store.state.count }}</h1>
    <h1>{{ this.$store.getters.getName }}</h1>
    <button @click="syncAdd">同步加10</button>
    <button @click="asyncAdd">异步加10</button>
  </div>
</template>

<script>
export default {
  methods: {
    syncAdd () {
      this.$store.commit('addTen', 10)
    },
    asyncAdd () {
      this.$store.dispatch('minusTen', 10)
    }
  }
}
</script>
复制代码

表語文字

上記に書かれているthis.$store取得するプロパティメソッドまたは操作。

this.$store.state.count
this.$store.getters.getName
this.$store.commit('addTen', 10)
this.$store.dispatch('minusTen', 10)
复制代码

しかし、これらの操作は、すべての時間を書き、書くことがより複雑であるthis.$store速記のために、そうvuexは、メソッドが使用する準備ができてコンポーネントに直接マッピングしています。

<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <h1>{{ getName }}</h1>
    <button @click="syncAdd">同步加10</button>
    <button @click="asyncAdd">异步加10</button>
  </div>
</template>

<script>
import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'
export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getName'])
  },
  methods: {
    syncAdd () {
      this.addTen(10)
    },
    asyncAdd () {
      this.minusTen(10)
    },
    ...mapActions(['minusTen']),
    ...mapMutations(['addTen'])
  }
}
</script>
复制代码

拡張された演算子を使用して、留意すべきことの一つは、これらのメソッドによって返されるすべてのオブジェクトを表し、mapStateそしてmapGettersそれらは、データタイプに応じて定義されているため、計算の属性を定義します。しばらくmapActionsしてmapMutations、私たちはの方法で定義する必要があります。

スプリットモジュール

プロジェクトあまり保守状態は、個々のモジュールに分割することができる場合に、条件は、階層的であることができる、の定義に店舗があるmodules別個のモジュールを定義することができる特性。

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

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    'page1': {
      namespaced: true,
      state: {
        count: 1,
        person: {
          name: '张三'
        }
      },
      mutations: {
        addTen (state, num) {
          state.count = state.count + num
        }
      },
      actions: {
        minusTen ({commit}) {
          setTimeout(() => {
            commit('addTen', 10)
          }, 1000)
        }
      },
      getters: {
        getName (state) {
          return state.person.name
        }
      }
    }
  }
})
复制代码

だから、アセンブリで使用されます

<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <h1>{{ getName }}</h1>
    <button @click="syncAdd">同步加10</button>
    <button @click="asyncAdd">异步加10</button>
  </div>
</template>

<script>
import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'
export default {
  computed: {
    ...mapState('page1', ['count']),
    ...mapGetters('page1', ['getName'])
  },
  methods: {
    syncAdd () {
      this.addTen(10)
    },
    asyncAdd () {
      this.minusTen(10)
    },
    ...mapActions('page1', ['minusTen']),
    ...mapMutations('page1', ['addTen'])
  }
}
</script>
复制代码

各方法は、最初のパラメータは、名前空間を指定し、2つのパラメータを渡し、第2のパラメータは、さらに、略語に順に対応する属性は、現在のコンポーネントで指定された名前空間ヘルパー機能モジュールが指定されてもよいです。

<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <h1>{{ getName }}</h1>
    <button @click="syncAdd">同步加10</button>
    <button @click="asyncAdd">异步加10</button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
// 创建帮助函数指定命令空间
let { mapActions, mapState, mapMutations, mapGetters } = createNamespacedHelpers('page1')

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getName'])
  },
  methods: {
    syncAdd () {
      this.addTen(10)
    },
    asyncAdd () {
      this.minusTen(10)
    },
    ...mapActions(['minusTen']),
    ...mapMutations(['addTen'])
  }
}
</script>
复制代码

略語は使用しないでください

this.$store.getters['page1/getName']
this.$store.state.page1.count
this.$store.commit('page1/addTen', 10)
this.$store.dispatch('page1/minusTen', 10)
复制代码

ます。https：//juejin.im/post/5cf78624f265da1b9421383bで再現