Vuex的五个属性
1.state定义状态(定义全局属性,可供所有的组件使用)
state: {
//定义状态(定义全局属性,可供任意组件调度)
products: [
{ name: "玛丽", money: 100 },
{ name: "汤姆", money: 90 },
{ name: "艾莎", money: 85 },
{ name: "白雪公主的后妈", money: 10 }
]
},
2.getters:通过getters获取全局状态,用的是方法,可以对数据进行微调。(与state用法相似,但是又不同),可以拿到state里面的内容
getters: {
// 通过getters获取全局状态,用的是方法,可以在里面对数据进行微调
// 与state用法相似,但是又不一样
getProducts:(state)=>{
return state.products; //在外部可以通过getproducts获取products
},
resetProducts:(state)=>{
return state.products.map((product) => {
return {
name:`**${product.name}**`,
money:`¥${product.money / 2}`
}
})
}
},
3.mutations:专门用来修改全局状态 同步
mutations: {
// 专门用来修改全局状态 同步的状态
reduceSalary : (state,payload) => {
state.products.forEach((product) =>{
product.money -= payload;
})
}
},
4.actions:调用mutation里面修改状态的方法,做的是异步的事情 异步
actions: {
// 调用mutation里面修改状态的方法,做的是异步的事情 异步的状态
// 此处的 context 实际上就是指当前的实例对象createStore,可以通过它获取state,getters,mutations等
// reduceSalary:(context)
// commit可以直接调用mutation中的方法
reduceSalary:({commit},payload) => {
//actions中处理的都是异步操作
setTimeout(()=>{
commit("reduceSalary",payload);
},2000);
}
}
5.modules:模块化 当内容过多时,可以通过模块化的方式进行引入
import productsModule from './products'
import countModule from './count'
modules: {
productsModule, // 进行模块化引用之后 state里面的内容需要加上模块的名称 eg:store.state.productsModule.products.map((product)=>{
countModule
}
PS:想在其他组件使用vuex里面定义的全局属性需要一下步骤:
- 在main.js文件中全局挂载store
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')
- 俩种使用方法:
(1).使用vm上的$store
(2).在需要使用的组件中引入useStore,通过store获取数据之后,在html中引用<h2>组件一{{$store.getters.resetProducts}}</h2> <h2>组件一{{$store.state.countModule.count}}</h2>
<template>
<div id="product-list-one">
<!-- <h2>组件一{{$store.state.products}}</h2> -->
<h2>组件一{{$store.getters.resetProducts}}</h2>
<h2>组件一{{$store.state.countModule.count}}</h2>
<!-- state的使用方法 -->
<ul>
<li v-for="product in products" :key="product.name">
<span class="name">**{{product.name}}**</span>
<span class="money">¥{{product.money}}</span>
</li>
</ul>
<!-- getters的使用方法 -->
<ul>
<li v-for="product in resetProducts" :key="product.name">
<span class="name">**{{product.name}}**</span>
<span class="money">{{product.money}}</span>
</li>
</ul>
<!-- mutation的使用方法 -->
<ul>
<li v-for="product in resetProducts" :key="product.name">
<span class="name">**{{product.name}}**</span>
<span class="money">{{product.money}}</span>
</li>
</ul>
<button @click="reduceSalary(4)">降低收入</button>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex';
const store = useStore();
const products = computed(() => store.state.products)
const resetProducts = computed(() => store.getters.resetProducts)
const reduceSalary = (amount) => {
store.state.products.forEach((product) => {
product.money -= 1;
});
//调用mutations中的方法
store.commit("reduceSalary",amount) //mutations调用方法
// dispatch分发actions对应的方法
store.dispatch("reduceSalary",amount)
}
/* 最原始的用法 数据放在APP.vue中
// 接收属性传值传过来的数据 products
defineProps({
products: {
type: Array,
required: true
}
})
*/
</script>
<style scoped>
#product-list-one{
background: #fff8b1;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
padding: 10px 20px;
}
#product-list-one ul{
padding: 0;
}
#product-list-one li{
display: inline-block;
margin-right: 10px;
margin-top: 10px;
padding: 20px;
background: rgba(255, 255, 255, 0.7);
}
.money{
font-weight: bold;
color: #e8800c;
}
</style>