Vue(第十五课)Pinia组件库的基本知识(二)

// 第三步 在State中修改Store属性
const changeName = () => {
  store.name = "我是响应式的数据信息";
  store.id = "10002001";
  store.sex = "女";
  store.SetCount()
  store.setAge()
  console.log(store);
};
// 第四步 在State中批量修改数据
const patchStore = () => {
  // 在state中数据要修改的信息
  store.$patch({
    id: "1001",
    name: "批量修改数据",
    sex: "不男不女",
    height: "190",
    weight: "89",
  });
};

//第五步  替换state中的属性
const updatestate = () => {
  store.$state = {
    counter: 0,
    name: "我是替换属性",
    sex: "男",
    height: "120",
    weight: "89",
  };
};
// 第六步 在State中重置state中属性的方法
const reset = () => {
  store.$reset();
};

 // getter是一个对象的信息内容  相当于计算属性的内容 
    getters:{
        getAddAge:(state)=>{
            // 返回出的数据
            return state.age+100
            // return(num)=>state.age+num
        },
        getAddName:(state)=>{
            return state.name="我是在getters中修改的姓名"
        },
        getAddHeight:(state)=>{
            return state.height="200"
        },
        doubleCounter:(state)=>state.counter*10,
        doubleFirst:(state)=>state.firstName="Hellow State",
        fullname:(state)=>state.firstName+state.lastName,
        // 新增状态属性和编写Getters
        phoneHidden(state){
            console.log('PhoneHidden被调用了')
            return state.phone.toString().replace(/^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/, '$1****$2')
          }

<template>
  <div>
    <h3>创建人的对象信息</h3>
    <div>{{store}}</div>
    <h2>
      <h1 style="color:green">state属性的基本使用</h1>
      <span>我的数量:{{counter}}</span>&nbsp;&nbsp;
      <span>编号:{{ id }}</span>&nbsp;
      <span>性别：{{ sex }}</span>&nbsp;&nbsp;
      <span>姓名:{{ name }}</span>&nbsp;&nbsp;
      <span>年龄:{{ age }}岁</span>&nbsp;&nbsp;
      <span>身高{{ height }}cm</span>&nbsp;&nbsp;
      </h2>
      <hr>
     <h1></h1>
      <h2>
      <h1 style="color:green">getters属性的基本使用</h1>
      <span>新的姓名:{{store.getAddName}}</span>&nbsp;&nbsp;
      <span>新的年龄:{{store.getAddAge}}</span>&nbsp;&nbsp;
      <span>新的身高:{{store.getAddHeight}}</span>&nbsp;&nbsp;
      <h1></h1>
      <span><button @click="changeName">更改姓名的方法</button></span>
      <span><button @click="reset">我在重置state数据信息</button></span>
      <span><button @click="patchStore">批量修改state中的数据信息</button></span>
      <span><button @click="updatestate">替换state对象的属性</button></span>
      <div>{{store.People}}</div>
    </h2>
    <OneItem></OneItem>
  </div>
</template>
<script setup>
import { useUsersStore } from "./store/user";
import { storeToRefs } from "pinia";
import OneItem from "./OneItem.vue";
// import { ref } from "vue";
// 第一 创建store对象
const store = useUsersStore();
console.log(store);
// 第二步 调用state属性的使用
// const id = ref(store.id);
// const name = ref(store.name);
// const age = ref(store.age );
// const height = ref(store.height);
// const {id,name,age,sex,height}= store
// 数据变为了响应式的数据信息
const { id, name, age, sex, height,counter } = storeToRefs(store);
// 第三步 在State中修改Store属性
const changeName = () => {
  store.name = "我是响应式的数据信息";
  store.id = "10002001";
  store.sex = "女";
  store.SetCount()
  store.setAge()
  console.log(store);
};
// 第四步 在State中批量修改数据
const patchStore = () => {
  // 在state中数据要修改的信息
  store.$patch({
    id: "1001",
    name: "批量修改数据",
    sex: "不男不女",
    height: "190",
    weight: "89",
  });
};
//第五步  替换state中的属性
const updatestate = () => {
  store.$state = {
    counter: 0,
    name: "我是替换属性",
    sex: "男",
    height: "120",
    weight: "89",
  };
};
// 第六步 在State中重置state中属性的方法
const reset = () => {
  store.$reset();
};
</script>

<template>
  <div>
    <h3 style="color: red">创建人的对象信息共享组件的数据</h3>
    <h3>创建人的对象信息</h3>
    <h2>
      <h1 style="color: green">state属性的基本使用</h1>
      <span>我的数量:{{ counter }}</span
      >&nbsp;&nbsp; <span>编号:{{ id }}</span
      >&nbsp; <span>性别：{{ sex }}</span
      >&nbsp;&nbsp; <span>姓名:{{ name }}</span
      >&nbsp;&nbsp; <span>年龄:{{ age }}岁</span>&nbsp;&nbsp;
      <span>身高{{ height }}cm</span>&nbsp;&nbsp;
      <hr>
      <h2>电话的属性:{{store.phoneHidden}}</h2>
      <h3><button @click="handleClickChangePhone">Getter缓存</button></h3>
      <h4>{{store.ObjectArray}}</h4>
    </h2>
  </div>
</template>
<script setup>
import { useUsersStore } from "./store/user";
// import { ref } from "vue";
// 创建store对象
const store = useUsersStore();
console.log(store);
// const id = ref(store.id);
// const name = ref(store.name);
// const age = ref(store.age );
// const height = ref(store.height);
const { id, name, age, sex, height } = store;
// 访问内容
/**
 *    doubleCounter:(state)=>state.counter*10,
   doubleFirst:(state)=>state.firstName="Hellow State",
   fullname:(state)=>state.firstName+state.lastName,
 */
console.log(store.firstName)
console.log(store.lastName)
// 点击按钮的对应函数
const handleClickChangePhone = () => {
    store.phone = "17800000000";
}
</script>