先交代下基础版本：
“node”：“V16.14.1” “vue”: “^3.4.21” “vite”: “^5.2.0”
接入状态store 即 vuex
呃(⊙﹏⊙)vuex这里可以略过了，我在研究完后，才发现vue3出来个pinia，是vuex的升级，体积更小更省事，我不删这里了，单纯记录下🙂 --pinia用法下面有写哦
① 执行 npm install vuex@next
② 在src下创建store文件夹，再创建index.js文件,文件基础内容如下：
import { createStore } from 'vuex'
export default createStore({
state: {
count:1
},
getters: {
},
mutations: {
incrementCount(state, data) {
state.count= data
}
},
actions: {
},
modules: {
}
})
③ 在main.js引入
import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 重点1
const app = createApp(App);
app.use(store); // 重点2
app.mount('#app');
到这里就store就引入完成了
接下来就浅说下获取值及设置值，嘻嘻嘻
获取:
import { useStore } from 'vuex'
const store = useStore()
const getCount = computed(() => store.state.count)
console.log('此时打印：'+ getCount.value) //此时打印：1
设置–这里要分为两种情况
① 在vue页面
import { computed} from 'vue'
import { useStore } from 'vuex'
const store = useStore()
store.commit('incrementCount', '2')
const getCount = computed(() => store.state.count)
console.log('此时打印：'+ getCount.value) // 此时打印：2
② 在js页面（js页面是获取不到vuex的，所以只要按照文件路径正常引入进入）
import store from '@/store/index' // 引入
import { computed} from 'vue'
// 将方法暴漏出去
export function setCount() {
store.commit('incrementCount', '3')
const getCount = computed(() => store.state.count)
console.log('此时打印：'+ getCount.value) // 此时打印：3
}
到这里store就全部讲完啦-------------------------------------------------------------------------------------------------
接入pinia （vuex的plus版👍）
① 执行：npm install pinia
② 新建store文件夹，在该文件夹下建立index.js文件
// index.js
//使用pinia来管理全局状态
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
③ main.js引用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//引入pinia状态管理
import pinia from './store'
createApp(App).use(pinia).mount('#app')
④ 在store文件夹下新建modules文件夹，在该文件夹下创建一个userStore.js文件夹，当然文件名也可自定义
//使用pinia来管理全局状态
import { defineStore } from "pinia"
/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，
第三个是 actions。
*/
//声明了一个useUserStore方法
const useUserStore = defineStore('user', {
//准备state——用于存储数据
state: () => {
return {
count: 0
}
},
getters: {
},
//准备actions——用于响应组件中的动作和用于操作数据（state）,pinia中只有state、getter、action，抛弃了Vuex中的Mutation
actions: {
increment() {
console.log("我来到actions方法里面了")
this.count++
return this.count
}
}
})
export default useUserStore
⑤ 接下来就是使用了
// HelloWorld.vue
<template>
<div>{{store.count}}</div>
<button type="primary" @click="store.increment()">count自增</button>
</template>
<script setup>
import useUserStore from "@/store/modules/userStore.js"
//引入全局状态
const store = useUserStore()
</script>
版本：“pinia”: “^2.1.7”
此时看下页面，点击按钮count值应该就可以变更了，好了爬了一个坑，继续往下走
pinia-plugin-persist缓存
这个功能是对pinia进行缓存，是vue2没有的，相当高级呀，解决了痛点
① 运行： npm install pinia-plugin-persist
② store文件夹下的index.js文件增加
//使用pinia来管理全局状态
import { createPinia } from 'pinia'
//使用persist该插件将pinia里面的state里面的属性进行缓存到localStorage或者sessionStorage里面
import piniaPluginPersist from 'pinia-plugin-persist' // 重点1
const pinia = createPinia()
//将persist插件放到pinia里面
pinia.use(piniaPluginPersist) // 重点2
export default pinia
③ 在modules下的js文件增加
//使用pinia来管理全局状态
import { defineStore } from "pinia"
/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，
第三个是 actions。
*/
//声明了一个useUserStore方法
const useUserStore = defineStore('user', {
//准备state——用于存储数据
state: () => {
return {
count: 0,
msg:'hello',
}
},
//使用persist插件对state里面属性进行缓存
persist: {
enabled: true,//开启缓存，默认缓存所有state里面的属性，默认key为defineStore里面的id值,这里id值为user,所以默认key为user
//自定义持久化参数，指定以下state里面的属性进行缓存，未指定的不进行缓存，如果该store需要全部缓存，strategies就不需要设置了
strategies: [
{
// 自定义key
key: 'count',
// 自定义存储方式，默认sessionStorage
storage: sessionStorage,
// 指定要持久化的数据
paths: ['count']
}
]
},
getters: {
},
//准备actions——用于响应组件中的动作和用于操作数据（state）,pinia中只有state、getter、action，抛弃了Vuex中的Mutation
actions: {
increment() {
console.log("我来到actions方法里面了")
this.count++
return this.count
}
}
})
export default useUserStore
版本：“pinia-plugin-persist”: “^1.0.0”
又是涨知识的一天(๑•̀ㅂ•́)و✧
