Pinia最简单使用(vite+vue3)

创建项目·

npm create vite@latest my-vue-app选vue
选JavaScript
cd my-vue-app
npm install
npm run dev

安装Pinia包

npm install pinia

main.js注册Pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from "pinia";
const app = createApp(App)
const pinia = createPinia();
app.use(pinia).mount('#app');

在src下创建store/store.js文件,放入以下内容

import { defineStore } from "pinia";
// 导出方法(每个方法对应一个模块,相当于vuex的模块化,引入组件时按需引入)
export const xj = defineStore("main", {state: () => {return {name: "萧寂",age: 22,sex: "男",};},getters: {},actions: {},
});

在app.vue中的使用(在其他组件也一样的)

<script setup>
//解构出store.js内的需要的方法(每个方法对应一个模块,相当于vuex的模块化)
import { xj } from "./store/store";//将数据变成响应式的方法
import { storeToRefs } from "pinia";// 调用解构出来的方法
const store = xj();//将store内的属性变成响应式的
storeToRefs(store);
//也可以(二者使用方式等价)
// const {name,age} = storeToRefs(store); //此时的name和age也是响应式的,但和ref不同,修改name或者age需要用store调用,如store.name=''//修改数据
const changeName = () => {store.name = "张三";
};//还原/重置所有数据
const reasetName = () => {store.$reset();
};
const reasetName2 = () => {// 这种重置相当于赋初始值操作,比较麻烦，推荐使用方式一store.name = "萧寂";store.age = 22;store.sex = "男";
};//批量修改数据
const pathStore = () => {store.$patch({name: "小红",age: 100,sex: "女",});
};const pathStore2 = () => {// 这种批量修改相当于赋值操作, 比较麻烦，推荐使用方式一store.name = "萧寂哈哈哈哈";store.age = 50;store.sex = "女";
};const piniaData = () => {console.log(store.name);console.log(store.age);console.log(store.sex);
};
</script><template><!-- 获取pinia的数据 --><div>姓名：{{ store.name }}</div><div>年龄: {{ store.age }}</div><div>性别: {{ store.sex }}</div><button @click="changeName">只更改姓名</button><button @click="reasetName">重置所有（方法一）</button><button @click="reasetName2">重置所有（方法二）</button><button @click="pathStore">批量修改数据（方式一）</button><button @click="pathStore2">批量修改数据（方式二）</button><button @click="piniaData">在js里面打印当前数据</button>
</template><style scoped lang="scss"></style>

接下来直接运行就好，我个人就比较喜欢直接使用赋值，直接修改这种，并且支持重置和批量修改，这里并未讲到关于pinia的方法使用，如getters和actions配置，因为我个人目前还没用到这种场景，只用到了全局数据，这里就只讲到了最简单使用就上面的取值，赋值，重置，批量修改，在js中打印数据，我目前只用到了这些，如果需要其他更详细的，来我博客找详细的pinia笔记去看