import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

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

store.commit('increment');

console.log(store.state.count) // 1

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count;
    }
  }
}

// 根组件
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const app = new Vue({
  el: '#app',
  store,
  components: {
    Counter
  },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

// Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

computed: {
  count () {
    return this.$store.state.count
  }
}

import { mapState } from 'vuex';

export default {
  computed: mapState ({
    count: state => state.count,
    countAlias: 'count',  // 别名 `count` 等价于 state => state.count
  })
}

computed: mapState([
 'count' 
 // 映射 this.count 为 store.state.count
])

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

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)
  }
 }
})

computed: {
 doneTodos () {
  return this.$store.getters.doneTodos
 }
}

getters: {
 doneTodos: state => {
   return state.todos.filter(todo => todo.done)
 },
 doneTodosCount: (state, getters) => {
  return getters.doneTodos.length
 }
}

import { mapGetters } from 'vuex'

export default {
 // ...
 computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
  ...mapGetters([
   'doneTodosCount',
   'anotherGetter',
   // ...
  ])
 }
}

computed: mapGetters([
   'doneTodosCount',
   'anotherGetter',
   // ...
  ])

import { mapState, mapGetters } from 'vuex';

export default {
  // ...
  computed: {
    ...mapGetters([ ... ]),
    ...mapState([ ... ])
  }
}

store.commit('increment')

mutaion: {
  increment (state, n) {
    state.count += n;
  }
}

store.commit('increment', 10);

mutation: {
  increment (state, payload) {
    state.totalPrice += payload.price + payload.count;
  }
}

store.commit({
  type: 'increment',
  price: 10,
  count: 8
})

import { mapMutations } from 'vuex'

export default {
 // ...
 methods: {
  ...mapMutations([
   'increment' // 映射 this.increment() 为 this.$store.commit('increment')
  ]),
  ...mapMutations({
   add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
  })
 }
}

var store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment: function(state) {
   state.count++;
  }
 },
 actions: {
  increment: function(store) {
   store.commit('increment');
  }
 }
});

actions: {
 incrementAsync ({ commit }) {
  setTimeout(() => {
   commit('increment')
  }, 1000)
 }
}

// 以载荷形式分发
store.dispatch('incrementAsync', {
 amount: 10
})

// 以对象形式分发
store.dispatch({
 type: 'incrementAsync',
 amount: 10
})

import { mapActions } from 'vuex'

export default {
 // ...
 methods: {
  ...mapActions([
   'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
  ]),
  ...mapActions({
   add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
  })
 }
}

//SET_SINGER,SET_SONG 为mutation中要使用的方法名

export const SET_SINGER = 'SET_SINGER'

export const SET_SONG = 'SET_SONG'

import * as types from ',/mutation-types.js'

const mutations = {
  [types.SET_SINGER](state, singer) {
    .... 
  },
  [types.SET_SONG](state, song) {
    .... 
  }
}