<script src="https://unpkg.com/vuex/dist/vuex.js"></script>

npm install vuex --save

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

new Vue({
  el: '#app',
  store: store,
})

const store = new Vuex.Store({
  // 状态
  state: {
    numbers: [0, 1, 2, 3, 4, 5, 6]
  },
});

import { mapState } from 'vuex'

// ...
// 为辅助函数 `mapState` 传递对象（键值对有多种方式）
computed: mapState({
  // 直接以 state 的属性的字符串形式作为值，键可以是任意名，这样可以重命名 state 的属性
  countAlias: 'count',
  // 使用箭头函数，以 state 作为传入的参数，返回所需的 state 中一个属性
  count: state => state.count,
  // 使用常规函数，以 state 作为传入的参数，这样能够通过 this 获取当前组件的局部状态（data 属性），返回一个新的混合状态
  countPlusLocalState(state) {
    return state.count + this.localCount
  }
})

import { mapState } from 'vuex'

// ...
// 为辅助函数 `mapState` 传递数组（映射的计算属性的名称与 state 的属性名相同）
// 计算属性只包含从 state 映射得到的属性
computed: mapState([
  'count'
])

import { mapState } from 'vuex'

// 如果组件的计算属性包含从 state 映射得到的属性，还包含组件中的局部计算属性
// mapState 函数返回的是一个对象
// 可以利用对象展开运算符解构 mapState 返回的对象，将它们与组件中的局部计算属性混合
computed: {
  localComputed() {...},
  ...mapState({...}),
  // 数组形式也一样
  ...mapState([...])
}

const store = new Vuex.Store({
  // 状态
  state: {
    numbers: [0, 1, 2, 3, 4, 5, 6]
  },
  // Getter
  getters: {
    oddNumbers(state) {
      return state.numbers.filter((num) => {
        return num % 2
      })
    },
    evenNumbers(state) {
      return state.numbers.filter((num) => {
        return (num % 2) - 1
      })
    }，
    numbersLen: (state, getters) => {
      return getters.oddNumbers.length + getters.evenNumbers.length
    }
  }
});

import { mapGetters } from 'vuex'

// ...
// 为辅助函数 `mapGetters` 传递数组（映射的计算属性的名称与 getters 的属性名相同）
computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
  ...mapGetters([
    'doneTodosCount',
    'anotherGetter',
  ])
}

import { mapGetters } from 'vuex'

// ...
// 如果想将重命名 getter 属性，为辅助函数 `mapGetters` 传递对象
computed: {
  ...mapGetters({
    // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
    doneCount: 'doneTodosCount'
  })
}

const store = new Vuex.Store({
  // 状态
  state: {
    count: 1
  },
  mutations: {
    INCREMENT(state) {
      // 变更状态
      state.count++
    }，
    SET_COUNT(state, n) {
      // 变更状态
      state.count = n
    }
  }
});

store.commit('SET_COUNT', { count: 10 })

store.commit({
  type: 'SET_COUNT',
  count: 10
})

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    // 数组形式
    ...mapMutations([
      // 将 this.increment() 映射为 this.$store.commit('increment')
      // 调用方法时支持载荷，将 this.increment(amount) 映射为 this.$store.commit('increment', amount)
      'increment',
    ]),
    // 对象形式，可重命名 method
    ...mapMutations({
      add: 'increment' // 将 this.add() 映射为 this.$store.commit('increment')
    })
  }
}

const store = new Vuex.Store({
  // ...
  actions: {
    increment (context, payload) {
      context.commit('INCREMENT', payload)
    }
  }
});

const store = new Vuex.Store({
  // ...
  actionA ({ commit }) {
    // 定义一个 action 操作，它返回一个 Promise
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
});

// 在组件中使用
store.dispatch('actionA').then(() => {
  // ...
})

store.dispatch('actionType')

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    // 数组形式
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
      'incrementBy'
    ]),
    // 对象形式
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

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