vue辅助函数mapStates与mapGetters

状态管理器

<!-- store.js: -->

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 需要管理的组件状态
    loginState: '',
    list: [1, 2, 3, 4, 5, 6, 7]
  },
  getters: { // 可以看做是state的计算属性，类似于组件中的data月computed
    len (state) {
      return state.list.length
    }
  },
  mutations: { // 唯一改变状态的地方
    changeLoginSatate(state, data) { // 代表的是初始化的数据，data代表需要改变的数据
      state.loginState = data
    }
  },
  actions: { // 异步操作
  }
})

第二步：获取

import { mapState,mapGetters } from 'vuex' // 导入mapState

// 辅助函数...mapState
computed: {
    ...mapState({
      loginState: (state) => { return state.loginState }
    }),
  },

// > 拿取数据
 addCart () {
      const { $store: { state: { loginState } } } = this
      if (loginState === 'ok') {
        console.log("加入购物车")
      } else {
        this.$router.push('/login')
      }
    },

辅助函数样式二

<!-- store.js: -->

  state: { // 需要管理的组件状态
    loginState: '',
    list: [1, 2, 3, 4, 5, 6, 7]
  },
  getters: { // 可以看做是state的计算属性，类似于组件中的data月computed
    len (state) {
      return state.list.length
    }
  }

<!-- 调用页面: -->

import { mapState,mapGetters } from 'vuex'

// 辅助函数...mapGetters
 computed: {
    ...mapGetters({
      // len: (getters) => {
      //   len
      // }
      len: 'len'
    })
  },

// 拿取数据

{{ len }}

区别

state: { // 需要管理的组件状态
    loginState: '',
    list: [1, 2, 3, 4, 5, 6, 7]
  },
  getters: { // 可以看做是state的计算属性，类似于组件中的data里的computed ！！！可以通过len（函数）把state里的数据处理好返回给函数本身，页面需要调用时直接引入辅助函数mapGetters，拿值
    len (state) {
      return state.list.length
    }
  }