Vuex中五个属性以及使用方法详解

//    src/store/index
const store = new Vuex.Store({
    state: {
        number:66
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.number
        }
    },
    // this.$store.state.number
})
// 每当 store.state.number 发生变化, 都会重新求取计算属性，并且触发更新相关联的 DOM。

// 在需要使用的文件里
import { mapState } from 'vuex'
export default {
  // ...
  methods:{
 ...mapState({ myNumber: 'number' }),
} 
}    

const store = new Vuex.Store({
  state: {
    number: 1
  },
  mutations: {
    //无提交载荷
    Submit(state) {
        state.number++
    }
    //提交载荷
    SubmitN(state, payload) {
      state.number += payload.num
    }
  }
})

//无提交载荷
this.$store.commit('Submit')
//提交载荷
this.$store.commit('SubmitN', {
    num: 66
    })

// 在需要使用的文件里
import { mapMutations } from 'vuex'
export default {
    methods:{
    ...mapMutations({ mySubmit: 'Submit', mySubmitN: 'SubmitN'}),
}

const store = new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {
    submit (state) {
      state.number++
    }
  },
  actions: {
    submit (context) {
      setInterval(function(){
        context.commit('submit')
      }, 1000)
    }
  }
})

this.$store.dispatch('increment')

import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'submit' 
    ]),
    ...mapActions({
      add: 'submit' 
    })
  }
}

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})
export default store

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  getters
})
export default store

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  username: state => state.user.username,
  empno: state => state.user.empno
}
export default getters

import { mapGetters } from 'vuex'
// mapGetters的作用：把getters映射为计算属性
computed: {
    ...mapGetters(['getPartList']),
    // ...mapGetters({
    //   calcList: 'getPartList'
    // }),
    // calcList () {
    //   // 注意：获取getters的值，不需要加括号（当属性使用）
    //   return this.$store.getters.getPartList
    // },
}