pinia

一、与Vuex对比总结

1. 支持选项式api和组合式api写法

2. pinia没有mutations，只有：state、getters、actions

3. pinia分模块不需要modules（之前vuex分模块需要modules）

4. TypeScript支持很好

5. 自动化代码拆分

6. pinia体积更小（性能更好）

二、pinia安装与使用

1、安装使用Pinia

1.1 安装下载

yarn add pinia
# or with npm
npm install pinia

1.2 main.js引入

import { createPinia } from 'pinia'

app.use(createPinia())

1.3 根目录新建store/index.js中写入

import { defineStore } from "pinia";

export const useStore = defineStore({
  id: "storeId",
  state: () => {
    return {
      name: "Eduardo",
      token: "",
    };
  },
  getters: {},
  actions: {
    setToken(token) {
      console.log("token", 11111);
      this.token = token;
    },
  },
});

1.4 组件使用

<script setup>
import { useStore } from '../store'
const store = useStore();
</script>

2、State

2.1 Pinia定义state数据

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  getters:{},
  actions:{}
})

2.2 组件使用pinia的state数据

<template>
    <div>
        <h1>A组件</h1>
        {{ name }}
    </div>
</template>

<script setup>
import { useStore } from '../store'
const store = useStore();//解析用的
let { name } = store;
</script>

2.3 组件修改pinia的state数据

<template>
    <div>
        <h1>A组件</h1>
        {{ name }}
        <button @click='btn'>按钮</button>
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name }  = storeToRefs(store);
const btn = ()=>{
    name.value = '123';
}
</script>

本身pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，但是上面写的let { name } = store;这种解构是不可以的，所以要换解构的方式。

3、actions

actions就比较简单了，写入方法

4、getters

getters和vuex的getters几乎类似，也是有缓存的机制

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{
      counterPar(  ){
          console.log(111);
          return this.counter + 100;
      }
  },
  actions:{}
})
<template>
    <div>
        {{ counterPar }}
        {{ counterPar }}
        {{ counterPar }}
        <h1>A组件</h1>
        {{ counter }}
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar }  = storeToRefs(store);
</script>

如何分模块，就是引入不同的模块的js文件来区即可，不用vuex的modules写法