vuex的使用

记录一下，

首先vue项目里src下有store

store里最少有3个文件

first ：最重要的 index.js

second:getters.js

third:modules(这个是文件夹）

然后在modules里建一个js文件 打个比方 chat.js

chat.js

const chat ={
namespaced:true,
state:{

chatItem:false
},
mutations:{

 SET_CHATITEM:(state, data) {
      state.chatItem= data
    }
}，
 
const actions = {
  setChatItem({ commit }, data) {
    commit('SET_CHATITEM', data)
  }
}

}
export default chat

index.js

const store = new Vuex.Store({
  // 组合拆分出去的vuex小模块
  modules: {
    chat
  },
  // 基于vuex中state的计算属性
  getters
})

export default store

getters.js

const getters = {
  chatItem: state => state.chat.chatItem,
}
export default getters

赋值

this.$store.dispath('chat/setChatItem',true)

使用

import {mapGetters} from 'vuex'

(1) computed:{
...mapGetters(['chatItem'])
}

(2) const {chatItem} =this.$store.getters

监听

computed:{
 getChatItem(){
     return this.$store.getters.chatitem
 }
},
watch:{
   getChatItem(newVal){
  console.log(newVal,'vuex值的变化')
  }
}