import { mapState } from 'vuex'

export default {
  name: 'AboutWorld',
  computed: {
    countM: function mappedState() {
      return this.$store.state.count
    },
    storeNumb: function mappedState() {
      return this.$store.state.numb
    }
  },
  mounted() {
    // 使用辅助函数
    const result = mapState({ storeCount: 'count', storeNumb: 'numb' })

    // 打印结果：是一个包含计算属性countM的对象（结果和computed🤔效果一样）
    console.log(result)
  }
}
 
        Copied!
    

const mutations = {
  // 方式1
  // UP(state, payload = 1) {
  //   state.count += payload;
  // },

  // 方式2
  UP(state, payload) {
    // 一、没有传参时payload的结果
    // 1、组件中直接使用commit：PointerEvent对象🤔 --> 真值
    // 2、Actions中使用commit：undefined --> 假值
    console.log(payload)

    // 二、有传参时payload的结果
    // 就是传入的内容
    console.log(typeof payload)

    // console.log(payload instanceof PointerEvent)
    if (payload && !(payload instanceof PointerEvent)) {
      state.count += Number(payload)
    } else {
      state.count++
    }
  }
}
 
        Copied!
    

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
 
        Copied!
    

// 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
    }
  }
})
 
        Copied!
    

const actions = {
  argum(context, value) {
    console.log(context) // context可以看做一个miniStore（迷你版的store）
  },

  // ======================

  // 1、完整
  demo(context) {
    context.dispatch('asyncAction') // 和Getter的第二个参数一样

    context.commit('increment') // 修改state
    // context.state.count
  },

  // 2、简写
  demo({ dispactch, commit }) {
    dispactch('asyncAction')

    commit('increment')
    // context.state.count
  }
}
 
        Copied!
    

const actions = {
  // Promise链式调用
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password })
        .then((response) => {
          const { data } = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        })
        .catch((error) => {
          reject(error)
        })
    })
  },

  // await/async
  async changeRoles({ commit, dispatch }, role) {
    const token = role + '-token'

    commit('SET_TOKEN', token)
    setToken(token)

    const { roles } = await dispatch('getInfo')

    resetRouter()

    // generate accessible routes map based on roles
    const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
    // dynamically add accessible routes
    router.addRoutes(accessRoutes)

    // reset visited views and cached views
    dispatch('tagsView/delAllViews', null, { root: true })
  }
}
 
        Copied!
    

// 非模块化
// 1、直接
this.$store.state.stateA
// 2、辅助函数
// stateA
...mapState(['stateA','stateB']),

// 模块化（使用了命名空间）
// 1、直接
this.$store.state.模块名1.stateA
// 2、辅助函数
// stateA
...mapState('模块名1', ['stateA','stateB'])
...mapState('模块名2', ['stateC','stateD'])
 
        Copied!
    

// 非模块化
// 1、直接
this.$store.getters.getterA
// 2、辅助函数
// getterA
...mapGetters(['getterA','getterB'])

// 模块化（使用了命名空间）
// 1、直接 🤔
this.$store.getters['模块名1/getterA']
// 2、辅助函数
// getterA
...mapGetters('模块名1', ['getterA','getterB'])
...mapGetters('模块名2', ['getterC','getterD'])
 
        Copied!
    

// 非模块化
// 1、直接
this.$store.commit('mutationA', payload)
// 2、辅助函数
// mutationA(payload)
...mapMutations(['mutationA','mutationB'])

// 模块化（使用了命名空间）
// 1、直接
this.$store.commit('模块名1/mutationA', payload)
// 2、辅助函数
// mutationA(payload)
...mapMutations('模块名1', ['mutationA','mutationB'])
...mapMutations('模块名2', ['mutationC','mutationD'])
 
        Copied!
    

// 非模块化
// 1、直接
this.$store.dispatch('actionA', value)
// 2、辅助函数
// actionA(value)
...mapActions(['actionA','actionB'])

// 模块化（使用了命名空间）
// 1、直接
this.$store.dispatch('模块名1/actionsA', value)
// 2、辅助函数
// actionA(value)
...mapActions('模块名1', ['actionA','actionB'])
...mapActions('模块名2', ['actionC','actionD'])
 
        Copied!
    

const moduleA = {
  namespaced: true,
  // ...
  getters: {
    sumWithRootCount(state, getters, rootState, rootGetters) {
      return state.count + rootState.rootCount
    }
  }
}
 
        Copied!
    

const moduleA = {
  namespaced: true,
  // ...
  actions: {
    someAction({ commit, dispatch, state, rootGetter }) {
      commit('increment') // -> 'moduleA/increment'  使用局部的UP

      // null：表示传递是数据
      // {root:true} 表示使用的是根store中的mutation
      commit('increment', null, { root: true }) // -> 'increment'  使用全局的increment
    }
  }
}
 
        Copied!