浅谈Vuex的状态管理(全家桶)

$ npm install vuex --save

import Vue from 'vue'
import App from './App'
import router from './router' 
import store from './vuex/store'  //引用store.js
Vue.config.productiOnTip= false //阻止在启动时生成生产提示 

//vue实例
new Vue({
 el: '#app',
 router,
 store,              //把store挂在到vue的实例下面
 template: '',
 components: { App }
})

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //注册Vuex

// 定义常量  如果访问他的话，就叫访问状态对象
const state = {
  count: 1
}

// mutations用来改变store状态, 如果访问他的话，就叫访问触发状态
const mutatiOns= {
  //这里面的方法是用 this.$store.commit('jia') 来触发
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
//暴露到外面，让其他地方的引用
export default new Vuex.Store({
  state,
  mutations
})

// 计算
const getters = {
  count(state){
    return state.count + 66
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters
})
//count的参数就是上面定义的state对象
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。
组件中使用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 定义常量
const state = {
  count: 1
}

// mutations用来改变store状态 同步状态
const mutatiOns= {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
// 计算属性
const getters = {
  count(state){
    return state.count + 66
  }
}
// 异步状态
const actiOns= {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了，然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  count: 1
}
const mutatiOns= {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
const getters = {
  count(state){
    return state.count + 66
  }
}
const actiOns= {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了，然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}

//module使用模块组的方式 moduleA
const moduleA = {
  state,
  mutations,
  getters,
  actions
}

// 模块B moduleB
const moduleB = {
  state: {
    count:108
  }
}

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})