vue - store

基础用法

    //=> main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex)
const store = new Vuex.Store({

  // 全局的数据
  state: {
    count: 0
  },

  getters: {},

  // 在这里改变state中的数据
  mutations: {
    add: state => state.count++,
    reduce: state => state.count--,
    reset: state => state.count = 0
  },

  // 在这里提交mutations,并且可以在页面中调用actions
  actions: {
    addnum (context) {
      context.commit('add')
    },
    reducenum (context) {
      context.commit('reduce')
    },
    resetnum (context) {
      context.commit('reset')
    }
  }

})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

    //=> hello.vue
<template>
  <div class="hello">
    {{count}} <br>
    <button @click="addNum()">增加</button>
    <button @click="reduceNum()">减少</button>
    <button @click="resetNum()">重置</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['add', 'reduce', 'reset']),
    ...mapActions(['addnum', 'reducenum', 'resetnum']),

    addNum () {
      // 直接使用store来调用
      // this.$store.commit('add')

      // 使用mapMutations的方法来使用
      // this.add()

      // 使用mapActions的方法来使用
      this.addnum()
    },
    reduceNum () {
      // 直接使用store来调用
      // this.$store.commit('reduce')

      // 使用mapMutations的方法来使用
      // this.reduce()

      // 使用mapActions的方法来使用
      this.reducenum()
    },
    resetNum () {
      this.resetnum()
    }
  }
}
</script>

<style scoped>
.hello {
  width: 100%;
  height: 800px;
  padding: 50px;
  text-align: center;
  background-color: #f1f1f1;
  font-size: 26px;
  font-weight: 600;
  color: #3a4a5a;
}
</style>

抽离

//=> main.js
import store from './store'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

//=> store->index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({

  // 全局的数据
  state: {
    count: 0
  },

  // 可以使用state中的值,对他进行计算
  getters: {},

  // 在这里改变state中的数据
  mutations: {
    add: (state,n) => state.count += n,
    reduce: state => state.count--,
    reset: state => state.count = 0
  },

  // 在这里提交mutations,并且可以在页面中调用actions
  // 可以给actions传递参数 this.addnum(5)
  actions: {
    addnum (context, obj) {
      context.commit('add', obj)
    },
    reducenum (context) {
      context.commit('reduce')
    },
    resetnum (context) {
      context.commit('reset')
    }
  },

  modules: {}

})

// 获取从store中返回的数据

    getnum (context) { // 定义
        return new Promise((resolve, reject) => {
          const num = 9998
          resolve(num)
        })
    }


    getNum () {  //  使用
      this.getnum()
        .then(res => {
            console.log(res)
            this.num = res
        })
    }