pinia的state使用

State存储数据

State的作用，与vuex一样，就是用于管理数据的

在src目录下，新建一个store目录，在store目录下，新建一个man.js

js import { defineStore } from "pinia"用于定义store，我们用export const自定义变量(比如js export const personMan 或者js export const manStore 等等)接收，defineStore有$两种写法$，第一种：第一个参数(id)是用于唯一表示store的，比如man或者male等等都可以；第二个参数为对象，里面包含state，getters。第二种：参数为一个，这个参数是对象，然后id写在对象中

man.js代码如下

import { defineStore } from "pinia";

let xiaoming = {

  gender: "男",

  heights: 170,

  weights: 120,

};

let xiaoliang = {

  gender: "男",

  heights: 180,

  weights: 140,

};

const arr = [xiaoming, xiaoliang];

export const personMan = defineStore("man", {

  state: () => {

    return {

      hobby: "game",

      school: "蓝天小学",

      address: "中国",

      money: 500,

      xiaoliang,

      xiaoming,

      arr,

    };

  },

 getters: {},

actions: {},

第二种写法

import { defineStore } from "pinia";

let xiaoming = {

  gender: "男",

  heights: 170,

  weights: 120,

};

let xiaoliang = {

  gender: "男",

  heights: 180,

  weights: 140,

};

const arr = [xiaoming, xiaoliang];

export const personMan = defineStore({

   id: "man",

  state: () => {

    return {

      hobby: "game",

      school: "蓝天小学",

      address: "中国",

      money: 500,

      xiaoliang,

      xiaoming,

      arr,

    };

  },

 getters: {},

actions: {},

 

Main.js 代码配置

import { createApp } from "vue";

import "./style.css";

import App from "./App.vue";

import { createPinia } from "pinia";

const pinia = createPinia();

createApp(App).use(pinia).mount("#app");

在components下新建一个Person.vue文件

在App.vue $引入Person.vue,代码如下$

<script setup >

import Person from "./components/Person.vue";

</script>

<template>

  <Person></Person>

</template>
<style scoped>

</style>

使用store,用过引入自定义的store，然后调用这个函数，用一个变量接收。

在Person.vue文件，写下如下代码

<script  setup>

import { personMan } from "../store/man.js";

const manStore = personMan();

</script>

<template>

<div :style="{ 'margin-bottom': '100px', 'color': 'pink' }">我是Person组件</div>

  <hr />

<div>

      <h1>state的用法</h1>

      <p>展示小明</p>

      <div>{{ personMansStore.xiaoming }}</div>

</div>

</template>

<style scoped>

button {

  border: 1px solid red;

}

</style>

效果如下

通过解构，得到state中的数据

<script  setup>

import { storeToRefs } from "pinia";

import { personMan } from "../store/man.js";

const manStore = personMan();

let { money: newMoney } = manStore ;

let addMoney = () => {

  console.log('newMoney', newMoney);

 

  newMoney = 600;

  console.log(newMoney);

};


</script>

<template>

<h4 :style="{ 'margin-top': '100px', 'color': 'red' }">进行解构，解构后的数据但不是响应式的改变</h4>

      <p>他们拥有的钱是{{ personMansStore.money }}元,他们现在想要拥更多的金钱

        <br>

<button @click=addMoney>试试用解构的方法增加金钱</button>

      </p>

<p>点击后的钱为：{{ personMansStore.money }}元</p>

</template>

<style scoped>

button {

  border: 1px solid red;

}

</style>

效果如下

我们发现，最新的600并没有更新到DOM上，因此解构store，失去了响应式。

解构后怎么变成响应式？

我们需要使用pinia内置的storeToRefs这个函数，使解构后的值成为 响应式

<script  setup>

import { storeToRefs } from "pinia";

import { personMan } from "../store/man.js";

const manStore = storeToRefs(personMan);

let { money: newMoney } = manStore ;

let addMoney = () => {

  console.log('newMoney', newMoney);

// 此时的newMoney成为了ref类型的值对象，通过.value的形式，使其成为响应式

  newMoney = 600;

  console.log(newMoney);

};

</script>

<template>

<h4 :style="{ 'margin-top': '100px', 'color': 'red' }">进行解构，使用storeToRefs响应式的改变</h4>

      <p>他们拥有的钱是{{ personMansStore.money }}元,他们现在想要拥更多的金钱

        <br>

<button @click=addMoney>试试用解构的方法增加金钱</button>

      </p>

<p>点击后的钱为：{{ personMansStore.money }}元</p>

</template>

<style scoped>

button {

  border: 1px solid red;

}

</style>

我们再次尝试

发现值进行了改变

结束语 本次state的使用就介绍到这，下一小节，将会讲解$getters$的用法。感谢大家观看！