Tabla de contenido
la aplicación uni utiliza Pinia
Pinia de referencia en main.js
Opción opciones forma de definir pinia
Use el método de opciones de opción pinia en la página
Manera funcional de definir pinia
La pinia definida en el modo de función en la página.
¿Qué son las Pinias?
Pinia (pronunciado /piːnjʌ/como en inglés peenya) es un repositorio de Vue que le permite compartir el estado entre componentes, páginas.
En el lado del servidor, así como en pequeñas aplicaciones de una sola página, también puede obtener muchos beneficios al usar Pinia:
-
Soporte de herramientas de desarrollo
-
Línea de tiempo para rastrear acciones y mutaciones.
-
Mostrar la tienda que usan en el componente
-
Viaje en el tiempo para facilitar la depuración
-
-
Reemplazo de módulo caliente
-
Modificar la Tienda sin recargar la página
-
El estado actual se puede mantener durante el desarrollo.
-
-
Proporcione compatibilidad adecuada con TypeScript y autocompletado para desarrolladores de JS.
la aplicación uni utiliza Pinia
uni-app tiene Pinia integrado. Los proyectos de Vue 2 aún no son compatibles
El uso de HBuilder X no requiere instalación manual, se puede usar directamente. El uso de la CLI requiere instalación manual, ejecución yarn add [email protected] o npm install [email protected].
uni-app tiene una gestión de estado incorporada de vuex y pinia, que se puede usar sin instalación.
Estructura de proyecto sugerida
├── pages
├── static
└── stores // 注意此处
└── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scssPinia de referencia en main.js
mian.js hace referencia y usa pinia
//导入pinia
import * as Pinia from 'pinia'
// 创建Pinia实例 // 将pinia实例挂载到vue实例上
app.use(Pinia.createPinia());
return {
app,
Pinia, // 此处必须将 Pinia 返回
}
código completo main.js
// #ifndef VUE3
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
//导入pinia
import * as Pinia from 'pinia'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
// 创建Pinia实例 // 将pinia实例挂载到vue实例上
app.use(Pinia.createPinia());
return {
app,
Pinia, // 此处必须将 Pinia 返回
}
}
// #endifPreste especial atención a la posición de referencia del pinia, de lo contrario se informará un error.
Crear y registrar módulos
在需要使用全局状态管理的地方，你可以创建一个或多个Pinia模块。每个模块代表一个具体的状态管理单元。
proyecto, nuevo stores文件夹, para almacenamiento 创建和注册的模块
En stores文件夹, cree un nuevo archivo js ( useCounterStore.js) para almacenamiento 创建和注册的模块
Definir la forma pinia
选项options方式 definir pinia
useCounterStore.jsEscribe el siguiente código en
import { defineStore } from 'pinia'
// 定义仓库有两种定义方式
// 01 选项options方式
export const useCounterStore = defineStore('counter', {
// 定义状态
state:()=>({count:5}),
// 计算数据
getters:{
doubleCount:(state)=>state.count*2
},
// 动作支持异步
actions:{
setCount(v){
this.count = v;
}
}
})Use el método de opciones de opción pinia en la página
<template>
<view>
pinia 大菠萝doubleCount:{
{doubleCount}}
<button>{
{count}}</button>
</view>
</template>
<script>
import {useCounterStore} from "@/stores/useCounterStore.js
// map方泛
import {mapState} from 'pinia';
export default {
data(){},
computed: function(){
// 把pinia 的state映射到页面
...mapState(useCounterStore,["count","doubleCount"]
} ,
methods:{
// 把pinia的方法映射到页面
...mapActions(useCounterStore,["setCount"])
}
</script>Esta forma de escribir es muy similar a vuex, pero sin el método de mutación.
函数方式 definir pinia
Cree un nuevo archivo js ( useColorStore.js) y defina pinia
// 导入定义仓库的方法
import {defineStore} from 'pinia';
// 导入响应式和计算
import {ref} from 'vue'
const useColorStore = defineStore("color",()=>{
// 定义一个状态颜色为 默认红色
const color=ref('red');
// 定义一个设置状态的方法
const setColor = v=>{
color.value = v;
}
// 导入
return {color,setColor}
})
export default useColorStore; Usar 函数方式 la pinia definida en la página
<template>
<view class="container">
<button @click="setColor">更改颜色</button>
<view :style="'background:'+colorStore.color">
v-show="isShow"
</view>
</view>
</template>
<script setup>
import useColorStore from '@/stores/useColorStore.js'
const colorStore = useColorStore()
const setColor = () => {
colorStore.setColor('#333')
}
</script>
<style lang="less" scoped>
.container {
padding: 0 20px 20px;
font-size: 14px;
line-height: 24px;
}
</style>malentendido
documentos de referencia