【vue3中状态管理工具pinia的使用】pinia状态二（getters）

index.js

//有三个状态：state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。
import {defineStore} from 'pinia';
export const  useStore = defineStore('main',{
    // 定义state
    state:( )=>{
        return {
          name:'张三',
          age:18,
          address: "北京"
        }
    },
    getters: {  //getter类似于Vue3中的计算属性。
        gettersName(state){
            return state.name
        },
        gettersAge: (state) => {
            return state.age
        }
    },
})

运用

	<a-row>
	    <a-col span="12">
	        姓名：{{ store.gettersName }}	//张三
	    </a-col>
	    <a-col span="12">
	        年龄：{{ store.gettersAge }}	//18
	    </a-col>
	</a-row>
	import { useStore } from "../store/index";
	const store = useStore()