1.Vuex简介
*什么是vuex:专门在vue中实现集中式状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间的通信方式,且适用于任意组件间的通信
*什么时候用vuex:多个组件依赖于同一个状态;来自不同组件的行为需要变更同一状态
2.vuex工作原理图
(图片来源尚硅谷)
3.搭建vuex环境
*在2022年2月7日,vue3成为了默认版本,如果执行npm i vue则直接安装vue3,同时vuex4随之变成默认版本,如果执行npm i vuex则直接安装vuex4,但vuex4只能在vue3中使用,如果当前使用的是vue2,则必须使用vuex3:npm i vuex@3
*安装:npm i vuex->创建store文件夹->在store文件夹下创建index.js,该js文件用于创建vuex中最为核心的store->在index.js里引入vue和vuex->使用Vue.use(Vuex)-> 在main.js里引入store
//这是storexia的index文件
//该文件用于创建vuex中最为核心的store
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions={}
//准备mutations--用于操作数据
const mutations={}
//准备state--用于存储数据
const state={}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
//这是main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store/index.js'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({
el:'#app',
store,
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
}
})
*至此,所有的vm和vc身上都有了$store
4.vuex的小案例
<template>
<div>
<h1>当前求和为:{{$store.state.sum}}</h1>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">当前求和为奇数再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
export default {
name:'Count',
data() {
return {
n:1, //用户选择的数字
}
},
methods: {
increment(){
this.$store.dispatch('add',this.n)
},
decrement(){
this.$store.dispatch('sub',this.n)
},
incrementOdd(){
this.$store.dispatch('oddAdd',this.n)
},
incrementWait(){
this.$store.dispatch('waitAdd',this.n)
},
},
}
</script>
<style lang="css">
button{
margin-left: 5px;
}
</style>
//该文件用于创建vuex中最为核心的store
//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions={
add(context,value){
context.commit('ADD',value)
},
sub(context,value){
context.commit('SUB',value)
},
oddAdd(context,value){
if(context.state.sum%2==1){
context.commit('ADD',value)
}
},
waitAdd(context,value){
setTimeout(() => {
context.commit('ADD',value)
}, 1000);
}
}
//准备mutations--用于操作数据
const mutations={
ADD(state,value){
state.sum+=value
},
SUB(state,value){
state.sum-=value
}
}
//准备state--用于存储数据
const state={
sum:0 //当前的和
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})