vue的状态管理在哪里写，Vue3Vuex集中式状态
vue的状态管理在哪里写，Vue3Vuex集中式状态2、mapGetters：：getters的辅助函数。1、mapState：state的辅助函数。3、mutations：同步执行对变量进行的操作。4、actions：异步执行对变量进行的操作。vuex中的mapState，mapGetters，mapMutations，mapActions均是辅助函数：
Vuex，集中式状态（数据）管理在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
vuex分为state、getter、mutation、action四个模块，其作用：
1、state：定义变量。
2、getters：获取变量。
3、mutations：同步执行对变量进行的操作。
4、actions：异步执行对变量进行的操作。
vuex中的mapState，mapGetters，mapMutations，mapActions均是辅助函数：
1、mapState：state的辅助函数。
2、mapGetters：：getters的辅助函数。
3、mapMutations：：mutations的辅助函数。
4、mapActions：：actions的辅助函数。
Vuex，案例代码案例一：
效果
index.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 路由
import router from './router'
// 引入vuex
// import store from './store'
import store from './views/vuex/demo01/vuex01Store';
//import store from './views/vuex/demo02/vuex02Store';
// 引入element-plus&&引入element-plus的样式
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
// I18N=>zh_cn
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 统一导入element svg（全局注册）
import * as ELIcons from '@element-plus/icons-vue';
const app = createApp(App);
// 路由
app.use(router);
// vuex
app.use(store);
// element-plus
app.use(ElementPlus { locale: zhCn zIndex: 3000 size: 'small' });
// 循环导入图标
for (let iconName in ELIcons) {
app.component(iconName ELIcons[iconName])
}
app.mount('#app');
views/vuex/demo01/vuex01Store.js
//引入Vuex
import Vuex from 'vuex';
const store = new Vuex.Store({
//state用于存储数据
state: {
//当前的和
sum: 0
school: '社会学院'
subject: '编程'
}
//
getters: {
sum(state){
return state.sum;
}
tenfoldSum(state) {
return state.sum * 10
}
}
//mutations用于操作数据（state）
mutations: {
// 方法
increment(state value) {
console.log('mutations中的increment()被调用了')
state.sum = value;
}
// 方法
decrement(state value) {
console.log('mutations中的decrement()被调用了')
state.sum -= value;
}
}
//actions用于响应组件中的动作
actions: {
// 方法
incrementOdd(context value) {
console.log('actions中的incrementOdd被调用了')
if (context.state.sum % 2) {
context.commit('increment' value)
}
}
// 方法
incrementWait(context value) {
console.log('actions中的incrementWait被调用了')
setTimeout(() => {
context.commit('increment' value)
} 800)
}
}
});
// 创建并暴露store
export default store;
views/vuex/demo01/vuex01Manage.vue
<template>
<div id="vuex01Manage">
<h1>{{ name }}</h1>
<p>{{ desc }}</p>
<Child></Child>
<br />
</div>
</template>
<script>
import { ref reactive toRefs } from "vue";
import Child from "./vuex01Child.vue";
export default {
name: "我是父组件"
components: { Child: Child }
setup(props context) {
let data = reactive({ name: "我是父组件.vuex01Manage" });
let desc = ref("父组件的描述");
return {
...toRefs(data)
desc
};
}
};
</script>
<style lang="css">
#vuex01Manage {
background-color: rgb(223 171 180);
}
</style>
views/vuex/demo01/vuex01Child.vue
<template>
<div id="vuex01Child">
<h2>{{ name }}</h2>
<!-- 在模板文件中读取数据，不需要this -->
<h3>当前求和为：{{ $store.state.sum }}</h3>
<h3>当前求和放大10倍为：{{ $store.getters.tenfoldSum }}</h3>
<h3>我在{{ school }}，学习{{ subject }}~</h3>
<select v-model.number="num">
<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: "vuex01Child"
data() {
return {
name: "我是子组件.vuex01Child"
// 数字
num: 1
};
}
computed: {
sum() {
return this.$store.state.sum;
}
school() {
return this.$store.state.school;
}
subject() {
return this.$store.state.subject;
}
}
methods: {
// vuex中store.commit和store.dispatch的区别及用法
// commit：同步操作，数据提交至mutations，可用于读取信息写到缓存里。
// dispatch：含有异步操作，数据提交至actions，可用于向后台提交数据。
// 加
increment() {
console.log(this.$store);
this.$store.commit("increment" this.num);
}
// 减
decrement() {
this.$store.commit("decrement" this.num);
}
// 奇数
incrementOdd() {
this.$store.dispatch("incrementOdd" this.num);
}
// 等待后增加
incrementWait() {
this.$store.dispatch("incrementWait" this.num);
}
}
mounted() {
console.log("vuex01Child" this);
}
};
</script>
<style lang="css" scoped>
#vuex01Child {
margin: 0 auto;
width: 600px;
background-color: rgb(211 119 134);
}
button {
margin-left: 5px;
background-color: rgb(250 222 222);
border-block-color: #fff;
}
</style>
案例二：
效果
views/vuex/demo02/vuex02Store.js
//引入Vuex
import Vuex from 'vuex';
const store = new Vuex.Store({
//state用于存储数据
state: {
//当前的和
sum: 0
school: '社会学院2'
subject: '编程2'
}
//
getters: {
sum(state) {
return state.sum;
}
tenfoldSum(state) {
return state.sum * 10
}
}
//mutations用于操作数据（state）
mutations: {
// 方法
increment(state) {
console.log('mutations中的increment()被调用了')
state.sum = 1;
}
// 方法
decrement(state) {
console.log('mutations中的decrement()被调用了')
state.sum -= 1;
}
}
//actions用于响应组件中的动作
actions: {
// 方法
incrementOdd(context value) {
console.log('actions中的incrementOdd被调用了')
if (context.state.sum % 2) {
context.commit('increment' value)
}
}
// 方法
incrementWait(context value) {
console.log('actions中的incrementWait被调用了')
setTimeout(() => {
context.commit('increment' value)
} 800)
}
}
});
// 创建并暴露store
export default store;
views/vuex/demo02/vuex02Manage.vue
<template>
<div id="vuex02Manage">
<h1>{{ name }}</h1>
<p>{{ desc }}</p>
<Child></Child>
<br />
</div>
</template>
<script>
import { ref reactive toRefs } from "vue";
import Child from "./vuex02Child.vue";
export default {
name: "我是父组件"
components: { Child: Child }
setup(props context) {
let data = reactive({ name: "我是父组件.vuex02Manage" });
let desc = ref("父组件的描述");
return {
...toRefs(data)
desc
};
}
};
</script>
<style lang="css">
#vuex02Manage {
background-color: rgb(209 223 171);
}
</style>
views/vuex/demo02/vuex02Child.vue
<template>
<div id="vuex02Child">
<h2>{{ name }}</h2>
<!-- 在模板文件中读取数据，不需要this -->
<h3>当前求和为：{{ sum }}</h3>
<h3>当前求和放大10倍为：{{ tenfoldSum }}</h3>
<h3>我在{{ school }}，学习{{ subject }}~</h3>
<button @click="increment"> </button>
<button @click="decrement">-</button>
<button @click="incrementOdd">当前求和为奇数时再加</button>
<button @click="incrementWait">等一等再加</button>
<br />
</div>
</template>
<script>
import { mapState mapGetters mapMutations mapActions } from "vuex";
export default {
name: "vuex02Child"
data() {
return {
name: "我是子组件.vuex02Child"
// 数字
num: 1
};
}
computed: {
// 借助mapState生成计算属性，从state中读取数据（对象写法）
// 借助mapState生成计算属性，从state中读取数据（数组写法）
// ...mapState({ sum: "sum" school: "school" subject: "subject" })
...mapState(["sum" "school" "subject"])
// 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
// 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
...mapGetters({ tenfoldSum: "tenfoldSum" })
// ...mapGetters(['tenfoldSum'])
}
methods: {
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
...mapMutations({ increment: "increment" decrement: "decrement" })
// ...mapMutations(['increment' 'decrement'])
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
//...mapActions({incrementOdd:'incrementOdd' incrementWait:'incrementWait'})
...mapActions(["incrementOdd" "incrementWait"])
}
mounted() {
console.log("vuex01Child" this);
}
};
</script>
<style lang="css" scoped>
#vuex02Child {
margin: 0 auto;
width: 600px;
background-color: rgb(176 211 119);
}
button {
margin-left: 5px;
background-color: rgb(223 250 222);
border-block-color: #fff;
}
</style>
