pinia学习笔记

 

 前言 全局状态管理工具

Pinia.js 有如下特点：

• 完整的 ts 的支持；

• 足够轻量，压缩后的体积只有1kb左右;

• 去除 mutations，只有 state，getters，actions；

• actions 支持同步和异步；

• 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的

• 无需手动添加 store，store 一旦创建便会自动添加；

• 支持Vue3 和 Vue2

官方文档Pinia：Pinia | The intuitive store for Vue.js

git 地址： GitHub - vuejs/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

1、安装方法：

yarn add pinia
 
npm install pinia -s

2、引入注册Vue3

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
 
const store = createPinia()
let app = createApp(App)
 
 
app.use(store)
 
app.mount('#app')

vue2中使用：

import { createPinia, PiniaVuePlugin } from 'pinia'
 
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
 
new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

3、初始化仓库Store，使用仓库中的数据

1、src下新建一个文件夹Store

2、Store/新建文件index.ts

3、index.ts中定义仓库Store

4、在App.vue中使用Test仓库

 

import { defineStore } from 'pinia'


// Names 枚举 是为了定义一组数据  挡在defineStore中 作为唯一的值
 enum Names {
    Test1='Test1'
}
// defineStore（a,b）  a是给仓库绑定一个唯一的值，b是配置项，类型是对象，有三个参数 state,getters,actions
export const Test = defineStore(Names.Test1, {
    state: () => {
        return {
            current: 1,
            name:'老陈'
        }
    },
    // 相当于一个计算属性 可以在不修改state值的情况下 对值进行一些操作
    getters: {
        
    },
    //可以进行同步异步的提交
    actions: {
        
    }
})

 4、在App.vue中使用Test仓库

<template>
  <!-- 3、使用仓库中的数据 -->
  <div>
    <span> {{ testStore.current }}====={{ testStore.name }} </span>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
//1、导入pinia store
import { Test } from "./store";
export default defineComponent({
  setup() {
    //2、获取Test仓库中对象
    let testStore = Test();

    return {
      testStore,
    };
  },
});
</script>

4、修改state中数据的五种方式

1、State 是允许直接修改值的 例如current++

<template>
  <!-- 3、使用仓库中的数据 -->
  <div>
    <span> {{ testStore.current }}====={{ testStore.name }} </span>
    <br />
    <button @click="changeCurrent">修改current</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

import { Test } from "./store";
export default defineComponent({
  setup() {
    let testStore = Test();
    function changeCurrent() {
      //1、直接修改
      testStore.current++;
    }

    return {
      testStore,
      changeCurrent,
    };
  },
});
</script>
<style lang="less" scoped>
</style>

2、批量修改State的值

在他的实例上有$patch方法可以批量修改多个值

$patch({修改的属性1：值，修改的属性2：值})

 

<template>
  <!-- 3、使用仓库中的数据 -->
  <div>
    <span> {{ testStore.current }}====={{ testStore.name }} </span>
    <br />
    <button @click="changeCurrent">修改current</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

import { Test } from "./store";
export default defineComponent({
  setup() {
    let testStore = Test();
    function changeCurrent() {
      //1、直接修改
      //   testStore.current++;

      //2、$patch 批量修改  $patch({修改的属性1：值，修改的属性2：值})
      testStore.$patch({
        current: 99,
        name: "娃娃",
        
      });
    }

    return {
      testStore,
      changeCurrent,
    };
  },
});
</script>

3、批量修改函数形式

推荐使用函数形式 可以自定义修改逻辑

<template>
  <!-- 3、使用仓库中的数据 -->
  <div>
    <span> {{ testStore.current }}====={{ testStore.name }} </span>
    <br />
    <button @click="changeCurrent">修改current</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

import { Test } from "./store";
export default defineComponent({
  setup() {
    let testStore = Test();
    function changeCurrent() {
      //1、直接修改
      //   testStore.current++;
      //2、$patch 批量修改  $patch({修改的属性1：值，修改的属性2：值})
      //   testStore.$patch({
      //     current: 99,
      //     name: "娃娃",
      //   });

      //3、使用$patch(函数形式触发)
      testStore.$patch((state) => {
        state.current++;
        state.name += "~";
      });
    }

    return {
      testStore,
      changeCurrent,
    };
  },
});
</script>
<style lang="less" scoped>
</style>

 

4、通过原始对象修改整个实例

$state您可以通过将store的属性设置为新对象来替换store的整个状态

缺点就是必须修改整个对象的所有属性

<template>
  <!-- 3、使用仓库中的数据 -->
  <div>
    <span> {{ testStore.current }}====={{ testStore.name }} </span>
    <br />
    <button @click="changeCurrent">修改current</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

import { Test } from "./store";
export default defineComponent({
  setup() {
    let testStore = Test();
    function changeCurrent() {
      //1、直接修改
      //   testStore.current++;
      //2、$patch 批量修改  $patch({修改的属性1：值，修改的属性2：值})
      //   testStore.$patch({
      //     current: 99,
      //     name: "娃娃",
      //   });

      //3、使用$patch(函数形式触发)
      //   testStore.$patch((state) => {
      //     state.current++;
      //     state.name += "~";
      //   });

      // 4、原始的$state对象操作，缺点，state中所有的熟悉必须全部修改
      testStore.$state = {
        current: 999,
        name: "范冰冰",
      };
    }

    return {
      testStore,
      changeCurrent,
    };
  },
});
</script>

5、通过actions修改

定义Actions

在actions 中直接使用this就可以指到state里面的值

index.ts

import { defineStore } from 'pinia'


// Names 枚举 是为了定义一组数据  挡在defineStore中 作为唯一的值
 enum Names {
    Test1='Test1'
}
// defineStore（a,b）  a是给仓库绑定一个唯一的值，b是配置项，类型是对象，有三个参数 state,getters,actions
export const Test = defineStore(Names.Test1, {
    state: () => {
        return {
            current: 1,
            name:'老陈'
        }
    },
    // 相当于一个计算属性 可以在不修改state值的情况下 对值进行一些操作
    getters: {
        
    },
    //可以进行同步异步的提交
    actions: {
        //定义actions
        setCurrent() {
            this.current ++
        }
    }
})