vue3使用pinia

pinia使用方法

安装pinia

npm i pinia

在vue3的main.js中引入pinia
代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'



const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

在根目录下使用创建store目录来使得pinia可以保存数据或修改数据

//定义关于counter的store
import { defineStore } from 'pinia'

//defineStore 是返回一个函数 函数命名最好有use前缀，根据函数来进行下一步操作
const useCounter = defineStore('counter', {
	state: () => {
		return {
			userInfo: {
				password: "",
				username: ""
			}
		}
	}
})

export default useCounter

使用方法

pinia修改state数据

<template>
  <div class="pages">
    <div class="login-box" id="login-box">
      <div class="page-title">欢迎登录</div>
      <a-form
        :model="formState"
        v-bind="layout"
        ref="form"
        name="nest-messages"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :validate-messages="validateMessages"
      >
        <a-form-item
          label="用户名"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'change' },
          ]"
        >
          <a-input
            v-model:value="formState.username"
            placeholder="请输入用户名"
          />
        </a-form-item>
        <a-form-item
          label="密码"
          :rules="[
            { required: true, message: '请输入密码', trigger: 'change' },
          ]"
        >
          <a-input
            v-model:value="formState.password"
            placeholder="请输入密码"
          />
        </a-form-item>
        <div class="login-btn">
          <a-button type="primary" @click="sumbitForm">登录</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { login } from "@/api/api";
import { useRouter } from "vue-router";
//引入pinia文件
import useCounter from "@/store/index";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      formState: {
        username: "",
        password: "",
      },
    });
    const form = ref(null);
    // 这个李要引入一下
    const store = useCounter();
    //pinia录入数据,修改state里面的数据
            store.$patch({
              userInfo: {
                username:'123',
                password:123,
              },
            })
    
  },
};
</script>

pinia getters

使用方式：

1.getter声明方法

//定义关于counter的store
import { defineStore } from 'pinia'

//defineStore 是返回一个函数 函数命名最好有use前缀，根据函数来进行下一步操作
const useCounter = defineStore('counter', {
	state: () => {
		return {
			userInfo: {
				password: "",
				username: ""
			},
			count: 0
		}
	},
	getters: {
		addCount(state) {
			return function add(is) {
				return state.count += is;
			}
		}
	}
})

export default useCounter

2.getter使用

<script>
import useCounter from "@/store/index";
export default {
  setup() {
    const store = useCounter();
    store.addCount(12);
  },
};
</script>

pinia持久化

npm i pinia-plugin-persistedstate

使用pinia持久化插件

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);

在store/index.js中开启pinia持久化

//定义关于counter的store
import { defineStore } from 'pinia'

//defineStore 是返回一个函数 函数命名最好有use前缀，根据函数来进行下一步操作
const useCounter = defineStore('counter', {
	persist: true,//开启持久化
	...其他代码
})

export default useCounter