目录

1、vuex和pinia的区别

2、pinia官方地址

3、基本使用

 4.Pinia模块相互调用

5.Pinia持久化

1、vuex和pinia的区别

1、pinia没有mutations，只有: state、getters、actions（vuex有mutations）

2、pinia分模块不需要modules（vuex分模块需要modules）

3、pinia体积更小（性能更好）

4、pinia可以直接修改state数据（vuex还需要通过mutations来进行修改）

2、pinia官方地址

https://pinia.vuejs.org

3、基本使用

1. 安装一个vue3项目
2. 安装pinia

   yarn add pinia // 本人习惯用yarn 可以用其他安装方式

3. 在main.js中进行挂载

   // src/main.js
   import { createApp } from "vue";
   import App from "./App.vue";
   import router from "./router";
   import { createPinia } from "pinia";const pinia = createPinia();createApp(App).use(pinia).use(router).mount("#app");

4. 创建store

   // src/store/index.js
   import { defineStore } from "pinia";export const useStore = defineStore("main", {state: () => {return {num: 0,name: "Eduardo",};},getters: {},actions: {},
   });

5. 在文件中使用
   
6. 组件修改pinia中的state数据（pinia可以直接修改state数据-不需要和vuex一样通过mutations来修改-但是通过ES6解构拿值是不行的，结构出来的数据不是响应式）

   ​
   ​

   

    解决--

   

7. pinia数据需要批量更新

   // store/index.js
   import { defineStore } from "pinia";export const useStore = defineStore("main", {state: () => {return {num: 0,name: "Eduardo",arr: [1, 2],};},getters: {},actions: {},
   });//---------------------------------------------------------------------------
   // 组件中
   

   

8. pinia中的getters（Pinia 中的 getter 和 Vue 中的计算属性几乎一样，在获取 State值之前做一些逻辑处理。getter中的值有缓存特性，如果值没有改变，多次使用也只会调用一次）

   // store/index.js---添加getters方法
   import { defineStore } from "pinia";export const useStore = defineStore("main", {state: () => {return {num: 0,name: "Eduardo",arr: [1, 2],};},getters: {  // getter 中不仅可以传递 state 直接改变数据状态，还可以使用 this 来改变数据changeNum() {console.log("getters");return this.num + 1000;},
   //  changeNum(state) {
   //    return state.num + 1000;
   //  }},actions: {},
   });// 组件内  多次调用
   

   ​​​​​​​

 9.pinia中actions的使用（组件方法调用 store.方法名）

// store/index.jsimport { defineStore } from "pinia";export const useStore = defineStore("main", {state: () => {return {num: 0,name: "Eduardo",arr: [1, 2],};},getters: {changeNum(state) {console.log("getters");// return this.num + 1000;return state.num + 1000;},},actions: {upNum(val) {this.num += val;},},
});

// 组件内 --- 新增按钮和事件

 4.Pinia模块相互调用

// 新建 shopStore模块 src/shop.jsimport { defineStore } from "pinia";export const shopStore = defineStore("shop", {state: () => {return {list: ["棉服", "裤子"],};},getters: {},actions: {},
});// -------------------------------------------// src/index.jsimport { defineStore } from "pinia";import { shopStore } from "./shop"; // 1.引入shopStore模块export const useStore = defineStore("main", {state: () => {return {num: 0,name: "Eduardo",arr: [1, 2],};},getters: {changeNum(state) {console.log("getters");// return this.num + 1000;return state.num + 1000;},// 2.getters使用getShopStoreList() {return shopStore().list;},},actions: {upNum(val) {this.num += val;},},
});

// 组件中使用

​​​​​​​

5.Pinia持久化

1. 安装插件

   npm install pinia-persistedstate-plugin
   

2. 新建文件--src/store/index.js

   import { createPinia } from "pinia";
   // 引入pinia的持久化插件
   import piniaPluginPersist from "pinia-plugin-persist";const store = createPinia();
   store.use(piniaPluginPersist);export default store;

3. 在main.js中注册

   import { createApp } from "vue";
   import App from "./App.vue";
   import router from "./router";
   import store from "./store/index";createApp(App).use(store).use(router).mount("#app");

4. 新建文件--src/store/shop.js

   import { defineStore } from "pinia";export const shopStore = defineStore("shop", {state: () => {return {list: ["棉服", "裤子"],price: [123, 234],};},getters: {},actions: {},// 使用插件开启数据缓存persist: {enabled: true,strategies: [{// key的名称key: "my_shop",// 更改默认存储，改为localStoragestorage: localStorage,// 默认是全部进去存储// 可以选择哪些进入local存储，这样就不用全部都进去存储了paths: ["list"],},],},
   });

5. 组件内使用

6. 效果

    

    

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！