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: '',
  store
})

    //=> hello.vue

抽离

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