vue3 使用pinia -- vue2 vuex的plus版

接入状态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中的Mutationactions: {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>

此时看下页面，点击按钮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: [{// 自定义keykey: 'count',// 自定义存储方式，默认sessionStoragestorage: sessionStorage,// 指定要持久化的数据paths: ['count']}]},getters: {},//准备actions——用于响应组件中的动作和用于操作数据（state）,pinia中只有state、getter、action，抛弃了Vuex中的Mutationactions: {increment() {console.log("我来到actions方法里面了")this.count++return this.count}}
})
export default useUserStore

又是涨知识的一天(๑•̀ㅂ•́)و✧