【Vue】Vuex

Vuex简介

概念：

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中管理（读、写），也是一种适用于任意组件间的通信方式。

什么时候用Vuex

①多个组件依赖于同一状态

②来自不同组件的行为需要变更为同一状态

Vuex工作原理

组件在不需要ajax请求后端参数的时候，可以直接通过commit到Mutations而不通过Action

即通过Dispatcher和actions对话，commit和mutation对话

搭建Vuex工作环境

安装vuex

npm i vuex@3

使用vuex插件

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI  from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueRouter)
 
const vm = new Vue({
  render: h => h(App),
  router: router,
  // 安装全局事件总线
  beforeCreate() {
    Vue.prototype.bus = this
  },
  store
}).$mount('#app')
 
console.log(vm)

/store/index.js

import vuex from 'vuex'
import vue from 'vue'
 
vue.use(vuex)
 
const actions = {}
const mutation = {}
const state = {}
 
export default new vuex.Store(
    actions,
    mutation,
    state
)

vue.use(vuex)不能写在main.js中，因为脚手架解析main.js时会先解析import store再解析vue.use(vuex)，导致store/index.js的new vuex.Store不能用

Vuex的使用

组件

<template>
  <div>
    <h2>Sum:{{$store.state.sum}}</h2><br/>
    <select v-model="value">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increase">+</button>
    <button @click="decrease">-</button>
    <button @click="increaseOdd">odd +</button>
    <button @click="increaseWait">wait +</button>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        value: 1  
      }
    },
    methods: {
      increase() {
        this.$store.commit('INCREASE', this.value)
      },
      decrease() {
        this.$store.commit('DECREASE', this.value)
      },
      increaseOdd() {
        this.$store.dispatch('increaseOdd', this.value)
      },
      increaseWait() {
        this.$store.dispatch('increaseWait', this.value)
      }
    },
  }
</script>
 
<style>
 
</style>

store\index.js

import vuex from 'vuex'
import vue from 'vue'
 
vue.use(vuex)
 
const actions = {
    increaseOdd(context, value) {
        if(context.state % 2)
            context.commit('INCREASE', value)
    },
    increaseWait(context, value) {
        setTimeout(()=>{
            context.commit('INCREASE', value)
        },500)
    }
}
const mutations = {
    INCREASE(state, value) {
        state.sum += value
    },
    DECREASE(state, value) {
        state.sum -= value
    }
}
const state = {
    sum: 0
}
 
export default new vuex.Store({
    actions,
    mutations,
    state
})