Diferença entre Pinia e Vuex, instalação e uso do Pinia

Índice

1. A diferença entre Pinia e Vuex

2. Pinia usa estado, getters e ações

1. Instale e use o Pinia

2、Estado

3、ações

4, getters

3. Módulo de divisão Pinia

1. Estrutura do diretório

2, store/user.js

3. Uso de um determinado componente

4. Armazenamento persistente Pinia

1. Instale o plug-in

2, store/index.js

3、store/user.js

4. Chave personalizada

5. Estado local persistente

---

1. A diferença entre Pinia e Vuex

1. Suporta API opcional e escrita de API combinada
2. Pinia não tem mutações, apenas: estado, getters, ações
3. O submódulo pinia não requer módulos (o submódulo vuex anterior exigia módulos)
4. O suporte a TypeScript é bom
5. Divisão de código automatizada
6. pinia é menor (melhor desempenho)

endereço github

2. Pinia usa estado, getters e ações

1. Instale e use o Pinia

1.1 Instalação e download

yarn add pinia
# or with npm
npm install pinia

1.2 introdução ao main.js

import { createPinia } from 'pinia'

app.use(createPinia())

1.3 Escreva no novo store/index.js no diretório raiz

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{},
  actions:{}
})

1.4 Uso de componentes

<script setup>
import { useStore } from '../store'
const store = useStore();
</script>

2、Estado

2.1 Pinia define dados de estado

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'pinia',
      isAdmin: true,
    }
  },
  getters:{},
  actions:{}
})

2.2 Os componentes usam os dados de estado do pinia

<template>
	<div>
		<h1>A组件</h1>
		{
   
   { name }}
	</div>
</template>

<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>

2.3 O componente modifica os dados de estado do pinia

O próprio Pinia pode modificar os dados de estado diretamente, sem passar por mutações como vuex, mas o let { name } = store escrito acima; esse tipo de desconstrução não é possível, então precisamos alterar o método de desconstrução.

<template>
	<div>
		<h1>A组件</h1>
		{
   
   { name }}
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name }  = storeToRefs(store);
const btn = ()=>{
	name.value = '123';
}
</script>

2.4 Se os dados de estado precisarem ser atualizados em lotes

loja/index.js

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'pinia',
      arr:['a','b','c']
    }
  },
  getters:{},
  actions:{}
})

código do componente

<template>
	<div>
		<h1>A组件</h1>
		{
   
   { name }}
		{
   
   { counter }}
		{
   
   { arr }}
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name,counter,arr }  = storeToRefs(store);
const btn = ()=>{
	//批量更新
	store.$patch(state=>{
		state.counter++;
		state.arr.push(4);
		state.name = '456';
	})
}
</script>

*** Atualização em lote com $patch

3、ações

Ações são relativamente simples, escrever métodos, por exemplo, podemos fazer um determinado valor no estado +=, e passar parâmetros

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0
    }
  },
  getters:{},
  actions:{
  	changeCounter( val ){
  		this.counter += val;
  	}
  }
})

<template>
	<div>
		<h1>A组件</h1>
		{
   
   { counter }}
		<button @click='add'>加10</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter }  = storeToRefs(store);
const add = ()=>{
	store.changeCounter(10);
}
</script>

4, getters

Getters e getters vuex são quase semelhantes, e também há um mecanismo de cache

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{
  	counterPar(  ){
  		console.log(111);
  		return this.counter + 100;
  	}
  },
  actions:{}
})

<template>
	<div>
		{
   
   { counterPar }}
		{
   
   { counterPar }}
		{
   
   { counterPar }}
		<h1>A组件</h1>
		{
   
   { counter }}
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar }  = storeToRefs(store);
</script>

3. Módulo de divisão Pinia

Pinia não precisa usar módulos para dividir módulos como Vuex. Pinia pode definir diretamente os módulos correspondentes no diretório da loja.

1. Estrutura do diretório

store/user.js
store/shop.js
...

2, store/user.js

import { defineStore } from 'pinia'

export const user = defineStore({
  id: 'user',
  state:()=>{
  	return {
        userInfo:{
            nickName:'张三'
        },
        token:'xfdfdsjkdsj'
  	}
  },
  getters:{

  },
  actions:{
  	
  }
})

3. Uso de um determinado componente

<template>
	<div>
		<h1>A组件</h1>
		{
   
   { userInfo.nickName }}
	</div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { user } from '../store/user'
const store = user();
let { userInfo } = storeToRefs(store);
</script>

4. Armazenamento persistente Pinia

1. Instale o plug-in

npm i pinia-plugin-persist --save

2, store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

3、store/user.js

export const useUserStore = defineStore({
  id: 'user',

  state: () => {
    return {
      name: '张三'
    }
  },
  
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

4. Chave personalizada

Os dados são armazenados em sessionStorage por padrão, e o id da loja será usado como a chave.

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

5. Estado local persistente

Por padrão, todos os estados serão armazenados em cache e você pode especificar os campos a serem persistidos por meio de caminhos, e o restante não será persistido.

state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}