Vuex的五个属性

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里面定义的全局属性需要一下步骤：

1. 在main.js文件中全局挂载store

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

2. 俩种使用方法:
   (1).使用vm上的$store

       <h2>组件一{{$store.getters.resetProducts}}</h2>
       <h2>组件一{{$store.state.countModule.count}}</h2>
   

   (2).在需要使用的组件中引入useStore,通过store获取数据之后，在html中引用

<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>