【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
})