本文已参与「新人创作礼」活动，一起开启掘金创作之路。
pinia是什么？
- 全新的Vue状态管理库，用来管理数据状态
为什么用pinia？
- 抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库
- 兼容vue2和vue3版本
- 更完美TS支持
- 支持插件扩展功能
- 支持模块热更新无需加载页面可以修改容器，可以保持任何现有的状态
- 支持服务端渲染
- 不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化
- 代码块简洁
怎么用pinia？
注意事项
- pinia 删除了 mutations
- pinia不能与vuex混用
安装
npm i pinia --save
挂载Pinia
- main.ts引入pinia创建容器挂载到根实例
import { createPinia } from 'pinia'
const pinia = createPinia()
// 挂载
createApp(App).use(pinia).mount('#app')
创建Store
- 创建src\store\index.ts
- 容器名称要唯一,根据唯一的值来获取当前容器 类似于对象的key
import { defineStore } from "pinia" // 定义容器
export const mainStore = defineStore('useStore', {
/**
* 存储全局状态
* 必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染, TS 类型推导
*
*/
state: () => {
return {
num: 0,
dataList: ["test01", "test02"]
}
},
/**
* 用来封装计算属性 有缓存功能 =computed
*/
getters: {},
/**
* 编辑业务逻辑 =methods
*/
actions: {}
})
页面引入应用
<template>
<div>
<h1>{{ num }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
// 引入store
import { mainStore } from "../store/index";
export default defineComponent({
name: "Tab3Page",
setup(props, context) {
const myStore = mainStore();
let num = myStore.$state.num;
console.log(myStore);
console.log(myStore.$state);
console.log(myStore.$state.num);
return {
num,
};
},
});
</script>
遇到类型报错Could not find a declaration file
Could not find a declaration file for module '../store/index'. 'C:/jin_files/code/ionic-demo/mobile-framework/src/store/index.js' implicitly has an 'any' type.
欢迎大家指出文章需要改正之处~
学无止境，合作共赢
