1， 概念： 专门在Vue中实现集中式状态(数据)管理的一个Vue插件(Vue.use())， 对vue应用中多个组件的共享状态进行集中式的管理(读/写), 也是一种组件间通信的方式， 且适用于任意组件间通信
2, github地址：https://github.com/vuejs/vuex
二. 什么时候用vuex
1, 多个组件依赖于同一状态
2, 来自不同组件的行为需要变更同一状态
三. 使用过程
1, npm i vuex@3 (安装插件)
注意： 2022年7月，默认安装vue为npm vue3版本， vuex默认版本为vuex4(只能在vue3中使用)
1, vue2, 使用vuex3
2, vue3, 使用vuex4
2, Vue.use(Vuex)
3, store
4, vc ==> store(每个组件都可以用store)
四. 搭建vuex环境
1, 创建store文件 ./store/index.js
//该文件用于创建Vuex中最为核心 的store
//引入vue
import Vue from "vue";
//引入vuex库
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex) //让各个组件中拥有store属性
//准备ctions--用于响应组件中的动作
const actions = {}
//准备mutations--用于操作数据(state)
const mutations = {}
//准备state = {}
const state = {}
export default new Vuex.Store({
actions,
mutations,
state
})2, 在main.js中创建vm时传入store配置项
//引入store
import store from './store'
Vue.config.productionTip = false
new Vue({
el:'#app',
render: h=> h(App),
store,
beforeCreate() {
Vue.prototype.$bus = this;
//安装全局事件总线, 所有的VC,VM都能看到$bus
},
})五. 实例代码应用
Count.vue组件： 增加数据
1.1 dispath调用 actions， actions提交到mutations， mutations直接修改数据
1.2 commit调用mutations, mutations直接修改数据
组件中修改vue数据：
this.$store.dispatch('actions中的方法名',数据) 【逻辑复杂时，把业务逻辑写在actions中】
this.$store.commit('mutations中的方法名',数据) 【没什么逻辑时使用】
<template>
<div>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button @click="increment">加一</button>
<button @click="deincrement">减一</button>
</div>
</template>
<script>
export default {
name:'Count',
data() {
return {
n:1
}
},
methods:{
increment(){
this.$store.dispatch('increment',this.n)
//dispatch中的increment: 对应store.js中actions中的increment方法
},
deincrement(){
this.$store.commit('DEINCREMENT',this.n)
//commit中的increment: 对应store.js中mutations中的increment方法
//如果不需要actions做什么(即不需要服务员做什么), 可以直接找后厨
}
}
}
</script>2, 更新state信息
//该文件用于创建Vuex中最为核心 的store
//引入vue
import Vue from "vue";
//引入vuex库
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex) //让各个组件中拥有store属性
export default new Vuex.Store({
//准备actions--用于响应组件中的动作
actions:{
increment(context,value){
//context中还有dispatch[可以调用其它方法],及state
//写业务代码，调整value
context.commit('INCREMENT',value)
//commit中的increment: 对应mutations中的increment方法
//注意： 这里也可以直接执行mutations中的数据，只是开发者工具看不到效果
}
},
//准备mutations--用于操作数据(state)
mutations:{
INCREMENT(state,value){
state.sum += value
console.log(value,state.sum);
},
DEINCREMENT(state,value){
state.sum -= value
}
},
//准备state = {}
state:{
sum:1
},
//准备getters , 用于加工state中的数据， 类似于computed属性
getters:{
bigSum(state){
return state.sum * 10
}
}
})3, 读取state信息
组件中读取vue数据： {{$store.state.sum}}
<template>
<div class="main">
<h1>vuex学习</h1>
<!-- 模板里面能够看到VC里面的所有东西, 所以这里不用写this.$store -->
<p>当前的和是:{{$store.state.sum}}</p>
<p>当前的和*10的结果是:{{$store.getters.bigSum}}</p>
<Count/>
</div>
</template>
<script>
import Count from './components/Count.vue'
export default {
name:"App",
components:{
Count,
},
mounted() {
console.log(this);
},
}
</script>4, getters的使用
1, 概念： 当state中的数据需要经过加工后再使用时， 可以使用getters加工
2, 见2中的实例
3, 组件中读取{{$store.getters.bigSum}}
