vuex

概念

vuex核心是store（仓库）。vuex和单纯的全局对象的区别：

1. vuex的状态存储是响应式的。如果store中的状态变化，那么相对应的组件也会更新
2. 不能直接修改store中的状态。改变store的唯一方法是提交（commit）mutation里的方法。

属性

1. state: 相当于vue组件里的data属性，定义store里的状态。

// 定义
state: {
    doctorOnlineTip: {}
  },
  // 获取(放在computed计算属性中获取)
 a) $store.state获取：
  this.$store.state.doctorOnlineTip
  b) mapState
  ...(mapState['doctorOnlineTip'])

2. getters：store的计算属性。getters的返回值会根据他的依赖被缓存起来，且只有当他的依赖发生变化时才会重新计算。

getters: {
    lastDoctorOnlineTip: state => {
      return state.doctorOnlineTip
    }
  }
// 页面获取getters里的属性，在computed计算属性里获取
a)$store.getters获取：
computed: {
   lastDoctorOnlineTip () {
     return this.$store.getters.lastDoctorOnlineTip
   }
 }
 b) mapGetters获取
 import { mapGetters} from 'vuex'
 computed: {
   lastDoctorOnlineTip: ...mapGetters(['lastDoctorOnlineTip'])
 }

3. mutation是更改状态的唯一方法（提交mutation里定义的方法），Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

mutations: {
    setDoctorOnlineTip (state, doctorOnlineTip) {
      state.doctorOnlineTip = doctorOnlineTip
      if (!doctorOnlineTip) {
        window.localStorage.removeItem('lastDoctorOnlineTip')
      } else {
        window.localStorage.setItem('lastDoctorOnlineTip', JSON.stringify(doctorOnlineTip))
      }
    }
  },
// 页面修改
this.$store.commit('setDoctorOnlineTip', data)

4. actions异步修改store的状态（也是调用了commit）

import {
  getAddress
} from '_a/system'

export default {
  state: {
    addressList: null
  },
  mutations: {
    setAddress (state, address) {
      state.addressList = address
    }
  },
  getters: {
    addressList: state => {
      return state.addressList
    }
  },
  actions: {
    getAddress ({ commit }) {
      return new Promise((resolve, reject) => {
        const localAddress = window.localStorage.getItem('address')
        if (localAddress) {
          commit('setAddress', JSON.parse(localAddress))
          resolve(JSON.parse(localAddress))
        }
        getAddress().then(list => {
          commit('setAddress', list)
          window.localStorage.setItem('address', JSON.stringify(list))
          resolve(list)
        })
      })
    }
  }
}

项目应用

index文件

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'
import clinic from './modules/clinic.js'
// import address from './modules/address'
import doctorOnlineTip from './modules/doctorOnlineTip'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    WS_ASSIST: 1
  },
  mutations: {
    WS_ASSIST (state) {
      state.WS_ASSIST = Math.random()
    }
  },
  actions: {

  },
  modules: {
    user,
    clinic,
    // address
    doctorOnlineTip
  }
})

单个状态文件

export default {
  state: {
    doctorOnlineTip: {}
  },
  getters: {
    lastDoctorOnlineTip: state => {
      return state.doctorOnlineTip
    }
  },
  mutations: {
    setDoctorOnlineTip (state, doctorOnlineTip) {
      state.doctorOnlineTip = doctorOnlineTip
      if (!doctorOnlineTip) {
        window.localStorage.removeItem('lastDoctorOnlineTip')
      } else {
        window.localStorage.setItem('lastDoctorOnlineTip', JSON.stringify(doctorOnlineTip))
      }
    }
  }
}

修改

this.$store.commit('setDoctorOnlineTip', data)