Pinia使用技巧

vue2使用的vuex，是一个状态管理器，现在vue3出了最新的pinia，今年偿试一下。

首先是安装，这里要注意一下，有一个持久化插件，如果不用的话，页面一刷新，状态会消失。

npm install pinia -- 安装pinia

npm install pinia-plugin-persist. --安装持久化插件

在main.js中，添加引用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)  --使用持久化插件
const app = createApp(App);
app.use(pinia)
app.mount('#app')

新建store.js文件

import { defineStore } from "pinia";
const useUsersStore = defineStore('users',{
    state:()=>{
        return {
            name:'admin',
            age:20,
            sex:'男'
        }
    },
    persist:{
        enabled:true  --这个是开关，打开就是持久化
    }
})
export {useUsersStore}

页面的使用

<template>
  <div>
    <div>name:{{ name }}</div>
    <div>age:{{ age }}</div>
    <div>sex:{{ sex }}</div>
    <button @click="change">改变</button>
  </div>
</template>

<script>
import { useUsersStore } from './store/userstore'
import { storeToRefs } from 'pinia';
export default {
  setup() {
    const store = useUsersStore();
    const { name, sex, age } = storeToRefs(store) --用了这个可以实现双向绑定，值跟着改变
    const change = () => {
      store.age++;
    }
    return { age, name, sex, change }
  }
}
</script>

<style>

</style>

运行一下，可以添加年龄，而且状态不会消失。