目次
2.3.4。定数を使用してMutationイベントタイプを定義する
1.インストール
1.1。依存関係を追加する
npm install vuex --saveVuexはPromiseに依存しています。サポートしているブラウザがPromiseを実装していない場合は、es6-promiseなどのポリフィルライブラリを使用できます 。
npm install es6-promise --save1.2。プロジェクトで紹介されました
例として最新のvue-cli3アーキテクチャを取り上げ、それをsrc /main.jsに追加します
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)より一般的には、store.jsなどの専用の状態管理jsファイルがあります
main.jsではstore.jsのみが導入されています。そして、store.jsに上記の引用部分を追加します。将来的には、関連する状態管理はstore.jsで行われます。
1.3。例
最初に実際の戦闘の例をいくつか貼り付けて、直感的な使用法を理解します
main.js
記事のmain.jsの部分を参照してください。「これらを理解するには、Vue-routerの実際の戦闘で十分です」
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import flightInfo from './modules/flightInfo'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
flightInfo
},
state: {
},
mutations: {
},
actions: {
}
})
flightInfo.js（モジュラー状態管理）
import * as types from '../type'
const state = {
flightInfo: []
}
const getters = {
getflightInfo: state => state.flightInfo
}
const actions = {
saveFlightInfo ({ commit }, data) {
return new Promise(resolve => {
commit(types.FLIGHTINFO, data)
resolve(data)
})
}
}
const mutations = {
[types.FLIGHTINFO] (state, data) {
state.flightInfo = data
localStorage.setItem('flightInfo', JSON.stringify(state.flightInfo))
}
}
export default {
state,
actions,
getters,
mutations
}
type.js（定数ミューテーション名）
export const FLIGHTINFO = 'FLIGHTINFO'
上記の各jsファイルのディレクトリ構成は次のとおりです。
src
------ main.js
- - - お店
------------ store.js
------------ type.js
------------モジュール
------------------ flightInfo.js
2.使用法
2.1。状態
Vuexは単一の状態ツリーを使用します。これは、各アプリケーションに含まれるストアインスタンスが1つだけであることも意味します。
2.1.1。状態を定義する
const store = new Vuex.Store({
state: {
count: 0
}
})2.1.2。インポート状態
方法1：属性を計算します（ストアオブジェクトは個別にインポートされます）
Vuexの状態ストレージは応答性が高いため、ストアインスタンスから状態を読み取る最も簡単な方法は、計算された属性で特定の状態を返すことです。
const Counter = {
template: `<div>{
{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}短所：状態を使用する必要があるすべてのコンポーネントは、ストアの頻繁なインポートを必要とします
方法2：属性の計算（ストアオブジェクトのグローバルインポート）
Vuexは、ストアオプションを介してルートコンポーネントから各子コンポーネントに状態を注入するメカニズムを提供します（Vue.use（Vuex）を呼び出す必要があります）。
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})ルートインスタンスにストアオプションを登録することにより、ストアインスタンスはルートコンポーネントの下のすべての子コンポーネントに挿入され、子コンポーネントにはthis。$ storeからアクセスできます。Counterの実装を更新しましょう：
const Counter = {
template: `<div>{
{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}短所：コンポーネントが複数の状態を取得する必要がある場合、これらの状態を計算されたプロパティとして宣言することは、いくらか反復的で冗長になります。
- 方法3：mapStateヘルパー関数（オブジェクトのグローバルインポートを保存）
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import { mapState } from 'vuex';
const store = new Vuex.Store({
state: {
count: 3
}
});
new Vue({
el: '#app',
store,
data() {
return {
localCount: 4
}
},
computed: mapState({
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数(相对于箭头函数)
countPlusLocalState (state) {
return state.count + this.localCount
}
})
});マップされた計算属性の名前が状態の子ノードの名前と同じである場合、文字列配列をmapStateに渡すこともできます。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])方法4：mapState補助関数+オブジェクトエクスパンダ（オブジェクトのグローバルインポートを保存）
mapState関数はオブジェクトを返します。それをローカルの計算プロパティとどのように組み合わせることができますか？
computed: {
localComputed () { // ... },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}2.2。ゲッター
ストア内の状態から何らかの状態を導出する必要がある場合がありますか？
Vuexを使用すると、ストアで「ゲッター」を定義できます（ストアの計算された属性と考えることができます）。計算されたプロパティと同様に、ゲッターの戻り値は依存関係に従ってキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。
2.2.1。ゲッターを定義する
Getterは、最初のパラメーターとして状態を受け入れます。
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)
}
}
})ゲッターは、2番目のパラメーターとして他のゲッターを受け入れることもできます。
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}2.2.2。ゲッターをインポートします
1.属性別
ゲッターはstore.gettersオブジェクトとして公開され、プロパティの形式でこれらの値にアクセスできます
方法1：ストアオブジェクトを個別に導入します（インポートを介してstore.jsをインポートします）
store.getters.doneTodos方法2：ストアオブジェクトをグローバルに挿入します（Vueのストアオプションを使用）
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}2.合格方法
方法3
ゲッターへのパラメーターの受け渡しは、ゲッターに関数を返させることで実現されます。ストア内の配列をクエリする場合に非常に便利です。
getters: {
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }メソッドを介してゲッターにアクセスすると、毎回呼び出され、結果はキャッシュされないことに注意してください。
方法4：mapGetters補助関数+オブジェクトエクスパンダー（オブジェクトグローバルインポートの保存）
mapGettersヘルパー関数は、ストア内のゲッターをローカルで計算されたプロパティにマップするだけです。
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
getterプロパティに別の名前を付ける場合は、オブジェクトフォームを使用します。
mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
2.3。突然変異
2.3.1。突然変異の定義
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
state.count++
}
}
})2.3.2。トリガーミューテーション
方法1
store.commit('increment')モード2：mapMutationsセカンダリプロモーター関数識別子+オブジェクト+ストアはグローバルインポートオブジェクトを展開します
mport { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}2.3.3。トリガー時にパラメーターを実行する
パラメータはプリミティブ型です
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)パラメータはオブジェクトタイプです
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {amount: 10})2.3.4。定数を使用してMutationイベントタイプを定義する
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})2.3.5。突然変異は同期関数でなければなりません
2.4。アクション
アクションはミューテーションと似ていますが、次の点が異なります。
- アクションは、状態を直接変更するのではなく、ミューテーションを送信します。
- アクションには、任意の非同期操作を含めることができます。
2.4.1。登録アクション
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})Action関数は、ストアインスタンスと同じメソッドとプロパティを持つコンテキストオブジェクトを受け入れるため、context.commitを呼び出してミューテーションを送信するか、context.stateとcontext.gettersを介して状態とゲッターを取得できます。
ES2015パラメーターの非構造化を使用して 、コードを単純化します（特に、commit 何度も呼び出す必要がある場合 ）。
actions: {
increment ({ commit }) {
commit('increment')
}
}2.4.2。アクションの配布
方法1：ストアオブジェクトは個別にインポートされます+負荷なし
store.dispatch('increment') 方法2：ストアオブジェクトは個別にインポートされます+ロード
store.dispatch('incrementAsync', {amount: 10})方法3：オブジェクトのグローバルインポートとロードを保存する
this.$store.dispatch('incrementAsync', {amount: 10})モード4：mapActionsセカンダリプロモーター関数識別子+オブジェクト+ストアはグローバルインポートオブジェクトを展開します
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}