vuex使用步骤详解

npm install vuex --save

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

state: {
        detailInfo: {}
    },
mutations: {
     setDetailInfo(state, info) {
         state.lawyerInfo = info;
     }
 },
 actions: {
     onDetailInfo: function (context, payload) {
         context.commit("setDetailInfo", payload);
     },
 },
 getters: {
     onDetailInfo(state) {
         return //业务逻辑（所有用到该状态的都会在此被处理）
     }
 }

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

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1.下面是vue组件内监听

  //辅助函数mapState、mapGetter、mapMutation、mapAction
 //别忘了在上面引入 import {mapGetters} from "vuex";如果没有特殊处理也可以直接import {mapState} from "vuex"
 computed: {
            ...mapGetters(["onDetailInfo"])  //也可以对象形式...mapGetters({detail:"onDetailInfo"})
            //...mapState(["onDetailInfo"]) 也可以对象形式...mapState({detail:"onDetailInfo"})
        },
 watch: {
      onDetailInfo: function (info) {  //info就是store里面的detailInfo最新值
         //业务逻辑
      }
  }

如果只是单纯把state里面的值实时赋给页面只需computed即可（该页面data里面千万别再次定义info）

computed: {
     ...mapGetters({
       info: "onDetailInfo", //注意这里的info不能在data里面定义，否则会报错重复定义
     }),
     //这里顺便讲一下计算属性的具体用法吧
     //计算属性里面一般又分为get和set方法，默认走get
     customize：{
		get(){
			return this.name+this.age  //返回一个需要依赖其他属性计算而得的属性
		},
		set(val){ //监听当前属性值'customize'是否变化，val即为变化后的最新属性
			//这里执行一些你想要的操作，切记不可执行异步操作
			this.newName = val
		}
	}
   },

2.组件修改vuex里面的值

this.$store.dispatch('onDetailInfo', data) //data即你想传的值
this.$store.commit('setDetailInfo', data)
//推荐使用第一种

3.直接从vuex里面取值

this.$store.state.detailInfo