1.Vuex 3.x 是基于 Vue 2 提供的Vuex， 而 Vuex 4.x 是 为Vue 3提供的Vuex。

2.为啥要用Pinia?优势在哪里？

• Pinia 是一个 Vue 的存储库, 它能让你跨组件/页面共享状态.如果你熟悉组合式 API；
• 对于一个单页面应用可以使用Vuex，但是如果这是一个服务端渲染应用时，你的应用将暴露在安全漏洞之中

• 优势： - 1.Vue-Devtools 支持

- 2.模块热替换

- 3.插件的使用

- 4.支持服务端渲染

- 5.为JS用户提供适当的 TypeScript 支持与自动完成功能

3.如何使用pinia？

• 安装 yarn add pinia
• 引入

import { createPinia } from 'pinia';
app.use(createPinia())

• 使用

1.创建store文件夹 里面创建index.js,如下
import { defineStore } from "pinia";
export const useMainStore = defineStore('counter', {
 //数据存储
    state: () => {
        return {
            userName: '我是李四',
            userAge: 35
        }
    },
    //计算属性
    getters: {
        // 自动地推断返回值类型为一个数
        doubleAge(state) {
            return state.userAge * 2
        },
    },
    // 操作方法
    actions: {
        changeName(newName) {
            this.userName = newName
        }
    }
})
2.页面使用
import { useMainStore } from "@/stores/store";
import { storeToRefs } from 'pinia'
export default {
  setup() {
    // 访问方法
    
    const store = useMainStore();
    //为了从`store`中提取属性，同时保持其反应性，您需要使用`storeToRefs()`。它将为任何响应性（reactivity）属性创建引用。当您只使用存储中（`store`）的状态，而不调用任何动作时，这很有用:
    const { userName, userAge,doubleAge } = storeToRefs(store);
    //修改名称和年龄
    
    // 修改方法
    const changeName = () => {
    // `store` 的`$state`属性设置为新对象来替换 `store` 的整个状态：
      store.$state={userName:"我是王五",userAge:25}
    };
    // 订阅方法
    
    //通过`$subscribe()`store的方法观察状态及其变化
    
    return {
      store,
      userName,
      userAge,
      doubleAge,
      changeName,
    };
  },
};