store封装

state.js

let count = 100
let name = 'ronle'
let time = '2019'

export default {
  count,
  name,
  time
}

mutations.js

export default {
  changThis (state, num) {
    // 将state的值改变为传递过来的外部的值
    state.count = num
  }
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  getters: {
    showCount: function (state) {
      return 'count:' + state.count
    }
  }
})

页面上使用

import {mapState, mapMutations, mapGetters} from 'vuex'

computed: {
    ...mapState(['count']),
    ...mapState({
      name: 'name',
      time: 'time'
    }),
    ...mapGetters(['showCount'])
},
methods: {
    ...mapMutations(['changThis']),
    submit () {
      this.changThis(this.num)
      // 等价于
      // this.$store.commit('changThis', this.num)
    }
  }

<p>{{this.count}}</p>
<p>{{this.name}}
<p>{{this.time}}</p>
<p>{{this.showCount}}</p>
<button @click="submit">查询</button>
  

 

转载于:https://www.cnblogs.com/ronle/p/11461969.html