vuex-データマネージャ

const store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    increment (num) {
      state.num++
    }
  }
})

const app = new Vue({
  el: '#app',
  store,  //   store       “store”   ，     store            
  components: { Counter },
  template: `
class="app"><counter>counter>div>`
}) 
  
           
 
  
 
   
this.$store.state.count
 
  
 
  
const Counter = {
  template: `
{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
} 
  
 
   
mapState    
 
  
 
  
              ，                    ，  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'
])
  
Gettersについてstateからいくつかの  を  させる  がある  、 えばリストをフィルタしてカウントする
まず、これらは    によって ることができるが、    によって ると、コードの   が  し、vuexでは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)
    }
  }
})
  store.getters.doneTodosで  すると、2  のパラメータは のgettersであってもよいmapGettersを りることもできます
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  //            getters    computed    
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
  
     ...は、  を  してstateの を  するとともに、getterのフィルタ  を び す  に  です.     は い  です.
computed: {
  //  state     
  ...mapState(['count']),

  //  getter      
  count() {
    return this.$store.getters.doneTodos;
  }
}
  
 のも  に けます
import { mapGetters } from 'vuex'

computed: {
  //  state     
  ...mapState(['count']),

  //  getter      
  ...mapGetters({'doneTodos'})
}
  
Mutation 
Vuexのstoreのステータスを  する  の  はコミットです.コンポーネントではMutationsのメソッドを   び すことはできません.commitでのみできます.たとえば、 のようにします.
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
  
 び し  :
store.commit('increment')
  
もちろん、  のパラメータを すこともできます.
  mutations: {
    increment (state, n) {
      state.count += n;
    }
  }
  
store.commit('increment', 10)
  mutationは    でなければなりません.リターン の  の  は  できないからです.
 のstore.commit('increment')はコンポーネントに くのも  です
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' //    this.increment()   this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' //    this.add()   this.$store.commit('increment')
    })
  }
}
  
 のようにすることもできます.
methods : mapMutations(['add', 'reduce'])
  
Action 
Actionはmutationに ていますが、 います.
 Actionは、ステータス
を    するのではなく、mutationをコミットする.
アクションは、  の     
を むことができる.
actions: {
  addActions(context) {
    context.commit('add', 100)
  },
  reduceAction({commit}) {
    commit('reduce');
  }
}
  
import {mapActions, mapMutations} from 'vuex'
methods: {
  ...mapMutations(['add', 'reduce']),
    //this.$store.dispatch('addAction')
  ...mapActions(['addAction', 'reduceAction'])
}
  
    :
actions: {
  addActions(context) {
    context.commit('add', 100)；
    setTimeout(() => {context.commit('reduce')}, 4000);
  },
  reduceAction({commit}) {
    commit('reduce');
  }
}
  
  :
アクションはstore.dispatch('increment')コンポーネントでは、  の  を  してもよいし、
  methods: {
    ...mapActions([
      'increment' //    this.increment()   this.$store.dispatch('increment')
    ]),
    ...mapActions({
      add: 'increment' //    this.add()   this.$store.dispatch('increment')
    })
  }
  
モジュールグループ
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA    
store.state.b // -> moduleB