<script src="https://unpkg.com/vuex@4"></script>

npm install vuex@next --save

import { createApp } from 'vue'
import { createStore } from 'vuex'

const app = Vue.createApp({})
// 创建一个新的 store 实例
// 其中存放着组件共享的状态和修改状态的相关方法
const store = createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

// 将 store 实例作为插件进行安装
app.use(store)

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

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

// 组件
import { mapState } from 'vuex' // 在单独构建的版本中辅助函数为 Vuex.mapState

// ...
// 为辅助函数 `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' // 在单独构建的版本中辅助函数为 Vuex.mapState

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

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

const store = createStore({
  // 状态
  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
    }
  }
});

this.$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 = createStore({
  // ...
  actions: {
    increment (context, payload) {
      context.commit('INCREMENT', payload)
    },
    decrement ({ commit }, payload) {
      commit('DECREMENT', payload)
    }
  }
});

this.$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'
    ]),
    // 对象形式，可重命名 method
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

const moduleA = {
  state: () => ({ ... }), // 对于模块中的 state，需要使用函数形式，并返回一个对象
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = createStore({
    modules: {
      a: moduleA,
    }
})