vue3 + pinia状态管理库的基础使用

海星吧 2022-3-18 5227

pinia是一个比较新的状态管理库

下面来讲解一下pinia的食用方法。

vue3挂载pinia


src/mian.js

import pluginInstall from "./plugins";
import { createApp } from "vue";
import AppElement from "./App.vue";

let app;

async function render(props = {}) {
  const { container } = props;
  app = createApp(AppElement);
  app.use(pluginInstall);
  app.mount(container ? container.querySelector("#app") ?? "#app" : "#app");
  return app;
}

render();

src/plugins/index.js

import piniaInstall from "./pinia";
export default function install(app) {
  app.use(piniaInstall);
}

src/plugins/pinia/index.js

import { createPinia } from 'pinia';

export default createPinia();

接下来创建stores

src/stores

src/stores/test.js

import { defineStore } from 'pinia';

export const useStoreTest = defineStore('test', {
	state: () => ({
		_text: '测试1',
		_num: 2
	}),
	getters: {
		text: ({ _text }) => 'getters:' + _text,
		doubleNum: ({ _num }) => _num * 2,
		andText2: ({ _text }) => {
			const Test2 = useStoreTest2()
			const { text2,_text2 } = Test2
			return `${_text} -- ${text2} --- ${_text2}`
		},
	},
	actions: {
		setText(text) {
			this.text = text
		},
	},
});

export const useStoreTest2 = defineStore('test2', {
	state: () => ({
		_text2: '测试2',
	}),
	getters: {
		text2: ({ _text2 }) => 'getters:' + _text2,
	},
	actions: {
		setText2(text) {
			this._text2 = text
			console.log("setText2",this._text2)
		},
	},
});

defineStore( store的唯一id,option )

option: {
    state:{},
    getters:{},
    actions:{}
    ...
}

实际运用

<template>
	<div class="homepage">
		<p>{{ text }}</p>
		<p>{{ _num }}</p>
		<p>{{ doubleNum }}</p>
		<p>{{ text2 }}</p>
		<p>{{ andText2 }}</p>
		<button @click="setText2('黑黑黑')">change test2</button>
	</div>
</template>
<script setup>
import { useStoreTest, useStoreTest2 } from "@/stores/test"
import { storeToRefs } from "pinia";
const test1 = useStoreTest()
const test2 = useStoreTest2()

---如果不改为ref 数据就只是一次性的赋值
---const { text, doubleNum, andText2 } = test1 

---使用pinia的storeToRefs将test1中的内容转换为ref,支持解构赋值
const { text, _num, doubleNum, andText2 } = storeToRefs(test1) 

---photo:1. 这里的text2由于不是storeToRefs结构出来的值,所以不会获得响应更新视图
const { text2, setText2 } = test2; 

console.log(text.value, doubleNum.value, andText2.value, text2)
</script>
<style>
button {
	background-color: rgba(0, 0, 0, 0.2);
}
</style>

 


2022.3.19---ps

解释一下为什么state对象里的属性名要用 _ 作为前缀,其实这东西是flutter里的私有化变量的语法,

这么做是为了保证数据不被随意修改,要用到的就用getters返回出去,其他的就在内部里使用。

修改就用actions定义函数就好了。其实pinia虽然简单,但是状态的隐私还是得保护一下的。

不然跟短裤外穿没啥区别,除非你是超人可以随意。

最后于 2022-3-19 被海星吧编辑 ,原因:
弱鸡程序员年底还在加班
最新回复 (6)
  • 清风自来 2022-3-18
    0 2
    undefined
    你若盛开,清风自来
  • 越来越透明兽 2022-3-18
    1 3
    收藏了,上大学有空学这些,感谢分享
    我们相信奇迹
  • 海星吧 2022-3-18
    0 4
    越来越透明兽 收藏了,上大学有空学这些,感谢分享
    爱学习的兄弟给你点个赞。
    弱鸡程序员年底还在加班
  • 欧派兽 2022-3-19
    0 5
    奖励三级精华
    1:管理员给你移区后会显示移到了你之前发帖的区。 2:点击我作为楼主发帖时一楼下的图片签名,可以跳转到站规教程贴。 3:多次水贴水回复会封号哦? 4:不知道回什么的时候就点“里世界专属”,一键随机生成几种回复内容。 5:祝你在里世界玩得愉快!
  • 77999 2022-3-19
    0 6
    undefined
    这个人很懒,什么也没有留下!
  • 海星吧 2022-3-19
    0 7
    欧派兽 奖励三级精华
    感谢感谢。
    弱鸡程序员年底还在加班
    • ACG里世界
      8
          
返回
发新帖