vuex中五大属性和使用说明(包括辅助函数)

// state存储基本数据
state: {
    userId: '',
  }

// An highlighted block
const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

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

// getter
getter: {
    userIdDouble: function(state){
      return state.userId * 2
  }

const store = new Vuex.Store({
  state: {
      count:0
  }，
  getters: {
      // 单个参数
      countDouble: function(state){
          return state.count * 2
      },
      // 两个参数
      countDoubleAndDouble: function(state, getters) {
          return getters.countDouble * 2
      }
  }
})

const app = new Vue({
   //..
   store,
   computed: {
       count: function(){
           return this.$store.state.count
       },
       countDouble: function(){
           return this.$store.getters.countDouble
       },
       countDoubleAndDouble: function(){
           return this.$store.getters.countDoubleAndDouble
       }
   },
   //..
})

// mutations
 mutations: {
   SET_USER: (state, userId) => {
     state.userId = userId
   },
 },

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

// actions
actions: { // {} 是es6中解构，把对象解构成属性
  login({ commit }, value) {
    commit('SET_USER', value)
    // commit('SET_TOKEN', value2)
  },
  }

this.$store.dispatch(‘mutations方法名',值)

// An highlighted block
import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
    ]),
    ...mapActions({
      add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
    })
  }
}