Vuex全局状态管理

Vuex（全局状态管理）

组件之间传值

子父组件传值：1.父=>子 props 2.子=>父 this.$emit()
非子父组件传值：1.事件车通信eventEmitter 2.Vuex

1.安装Vuex

#vue 3.x版本以上安装vuex 4.x以上
cnpm install --save-dev vuex@4
#vue 2.x版本
cnpm install --save-dev vuex

2.使用Vuex

创建Vuex整个store(初始化store)

import {createStore} from 'vuex'
const store = createStore({
    state(){
    },
    mutations:{
    },
    getters:{
    },
    action(){
    },
    modules(){
    }
})
export default stroe

1.state（状态变量）

//创建state
state:{
    shop:[
	  {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
}

//组件内使用

//方法1  this.$store调用
this.$store.state.shop

//方法2  引入store直接使用
import store from '../store/index'
store.state.shop

//方法3  mapState方法
import {mapState} from 'vuex'
//数组形式
computed: mapState(['shop']),
//对象形式
computed: mapState({ shop: (state) => state.shop }),
//对象解构形式
computed: {
  ...mapState({
    shop: (state) => state.shop,
    // shop: 'shop',
  }),
}

2.getters（计算属性）

//使用getters计算属性
getters:{
  sortShop: (state) => {
   return state.shop.sort((a, b) => {
     return b.price - a.price
   })
  }
}

//组件内使用
//方法1
this.$store.getters.sortShop
//方法2
import store from '../store/index'
store.getters.sortShop
//方法3
//数组形式
computed: mapGetters(['sortShop']),
//解构对象形式
computed: {
  ...mapGetters({
    sortShop: 'sortShop',
  }),
},

3.mutations（更改state状态逻辑方法）

//使用mutations
mutations: {
  increment(state, n) {
    state.count += n
  },
  increment(state, payload) {
    state.count += payload.amount
  },
},

//方法1
this.$store.commit('increment', 10);
//方法2
import store from '../store/index'
//直接使用（state,n)
store.commit('increment', 10);
//对象使用(state,payload)
store.commit('increment', {amount: 10});
//type属性对象使用(state,payload)
store.commit({
  type: 'increment',
  amount: 10
});
//方法3
methods: {
  ...mapMutaions([
    'increment',
    // 映射 this.increment()为this.$store.commit('increment')
  ]),
  ...mapMutaions({
    // 映射 this.add()为this.$store.commit('increment')
    add: 'increment',
  }),
},

注意：mutation必须是同步函数，不能是异步的，这是为了调试的方便。

4.action（同mutations异步操作）

//使用action
action: {
	increment(context){
      context.commit('increment');
    }
    /* 可以用参数结构的方法来写action
     increment({commit}){
     commit('increment');
     }
     */
},

//方法1 
this.$store.dispatch('increment')
//方法2
import store from '../store/index'
store.dispatch('increment')
//方法3
methods: {
  ...mapActions([
    'increment' 
     // 映射 this.increment() 为 this.$store.dispatch('increment')
  ]),
  ...mapActions({
  	 add: 'increment' 
     // 映射 this.add() 为 this.$store.dispatch('increment')
  })
}

5.modules（模块）

module是为了将store拆分后的一个个小模块，这么做的目的是因为当store很大的时候，分成模块的话，方便管理。

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const moduleB = {
    state: {...},
    getters: {...},
    mutations: {....},
    actions: {...}
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});
 
store.state.a // 获取moduleA的状态
store.state.b // 获取moduleB的状态