概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
官方图示:
设计理念:集中式管理、状态可预测,简化组件管理状态的过程。
State:状态、数据。
Mutations:改变状态的函数。
Actions:异步请求、和后台交互。
Store:包含以上三个的容器。
Commit:改变数据的状态。
Devtools:拦截用户提交数据的变更、监管数据。
Mutate:提交改变状态
Render:执行得到新的虚拟DOM
DisPath:对比两个虚拟DOM 完成数据的更新。
使用:
1.下载
VUEX npm i vuex@3.6.2
2.模块化 + 命名空间
JS 进行拆分 将对应组件的 方法 与 数据 独立出来
公开 JS 并 开启命名空间( namespaced: true)
export default {
namespaced: true,
}
3. actions里面使用context.commit('传递的方法名',value) 第一个参数是mutations里面的方法参数 将value传递到mutations里面的方法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const actions={
addOdd(context,value){
console.log(("进入了actions的addOdd,value:" + value));
context.commit('ADDODD',value);
},addWait(context,value){
console.log(("进入了actions的addWait,value:" + value));
context.commit("ADDWAIT",value);//将value传给mutations的ADDWAIT方法
}
}
const mutations = {
JIA(state,value){
console.log(("j进入了mutations的JIA,value:" + value));
state.sum+=value;
},JIAN(state,value){
console.log(("j进入了mutations的JIAN,value:" + value));
state.sum-=value;
},
ADDODD(state,value){
console.log('进入了mutations的 ADDODD,value:' + value);
if (state.sum%2){
state.sum+=value
}
},ADDWAIT(state,value){
console.log('进入了mutations的 ADDWAIT,value:' + value);
window.setTimeout(()=>{
state.sum+=value;
},1000)
}
}
//准备state对象 用于保存具体的数据
const state={sum:0,schoolName:'猿究院'}
//准备getters用于将state中的数据进行再次加工
const getters={
bigSum(){
return state.sum*10;
}
}
4.暴露并创建VUEX
export default new Vuex.Store({
actions,mutations,state,getters
});
5.使用
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
, methods: {
...mapMutations('自定义名称',{
}),
...mapActions('自定义名称',{
})
将值传到actions
this.$store.dispatch('自定义名称/actions',this.name)
将值传到mutations
this.$store.commit('自定义名称/mutations',this.name)
}, computed: {
// 通过mapState 将sum等 为计算属性
this.$store.state.自定义名称.sum
定义数据
...mapState('自定义名称',['sum', 'schoolName']),
...mapGetters('自定义名称',['bigSum']),
...mapState('自定义名称',['personList'])
}
<template>
<div>
<!-- 直接写参数名-->
<h2>当前求和结果为:{{ sum }}</h2>
<h2>当前的求和内容放大10倍:{{bigSum}}</h2>
<h2>{{ schoolName }}</h2>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<!-- 函数必须传参-->
<button @click="increment(n)">
+
</button>
<button @click="decrement(n)">
-
</button>
<button @click="incrementOdd(n)">
求和为奇数在加
</button>
<button @click="incrementWait(n)">
延迟在加
</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
name: "MyCount",
data(){
return {
n:1
}
},methods:{
...mapMutations({increment:'JIA', decrement:'JIAN'}
),
// mapActions要写actions里面的方法
...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
},computed:{
...mapState(['sum','schoolName']),...mapGetters(['bigSum'])
}
}
</script>
<style scoped>
</style>