vue项目中pinia和vuex的使用

一、使用pinia

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//导入createPinia
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(router);
//把pinia实例挂载到app
app.use(createPinia());
app.mount('#app')

CountStore
import { defineStore } from 'pinia'
export const useCountStore = defineStore('count', {state() {return {sum: 0,school: '第一学校',address: '西安',time: new Date()}},actions: {//this就是当前仓库increment(val) {console.log('increment');this.sum += val}},getters: {bigSum: (state) => {return state.sum * 10},formatDate(state) {const date = state.time;const year = date.getFullYear(); // 年const month = String(date.getMonth() + 1).padStart(2, '0'); // 月，注意月份从0开始const day = String(date.getDate()).padStart(2, '0'); // 日const hours = String(date.getHours()).padStart(2, '0'); // 小时const minutes = String(date.getMinutes()).padStart(2, '0'); // 分const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒return {'YYYY-MM-DD': `${year}-${month}-${day}`,'DD/MM/YYYY': `${day}/${month}/${year}`,'MM-DD-YYYY': `${month}-${day}-${year}`,'YYYY/MM/DD HH:mm:ss': `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`,'YYYY.MM.DD': `${year}.${month}.${day}`};}}
})

TalkStore 
import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'
export const useTalkStore = defineStore('talk', {state() {return {list: JSON.parse(localStorage.getItem('talkList')) || []}},actions: {async getLove() {let res = await axios.get('https://v1.hitokoto.cn')let obj = {id: nanoid(),title: res.data.hitokoto}this.list.unshift(obj)}}
})

<template><div><h2>求和：{{ countStore.sum }}，放大10倍：{{ bigSum }}</h2><p>学校：{{ countStore.school }}</p><p>时间：{{time}}</p><p>格式化时间：{{ formatDate }}</p><p>位置：{{ countStore.address }}</p><button @click="add">批量修改（修改sum,bigSum也会被修改</button></div><hr><div><button @click="getLoveFn">获取一句土味情话</button><ul><li v-for="item in list" :key="item.id">{{ item.title }}</li></ul></div>
</template>
<script setup>
import { ref,toRefs } from 'vue';
import { useCountStore } from '../piniaStore/countStore';
import {useTalkStore } from '../piniaStore/talkStore'
import {storeToRefs} from 'pinia'
const countStore=useCountStore()
//解构赋值丢失了响应式
// const {sum,school,address} = countStore
//store中所有属性和方法都包裹成ref对象
// const {sum,school,address} = toRefs(countStore)
//storeToRefs只会关注store中的数据，不会对方法进行包裹
const {sum,school,address,time,bigSum,formatDate} = storeToRefs(countStore)//以下两种方式都可以拿到state中的数据
console.log('sum',countStore.sum);
console.log('sum',countStore.$state.sum);
const add = ()=>{//第一种修改方式// countStore.sum+=1;//第二种修改方式// countStore.$patch({//   sum: 1,//   school: '第二学校',//   address: '西安1'    // })//第三种修改方式countStore.increment(30)
}const talkStore=useTalkStore()
talkStore.$subscribe((mutate,state)=>{console.log('talkStore保存的数据发生了变化',mutate,state);localStorage.setItem('talkList',JSON.stringify(state.list))
})
const {list}=storeToRefs(talkStore)
const getLoveFn=()=>{talkStore.getLove()
}
</script>

二、使用vuex

1、vuex是什么

vuex是一个状态（数据）管理工具，它能够完成组件之间的数据共享（组件的通信）

2、vuex的作用

1）、vuex能够保存全局数据（数据仓库），供整个应用使用

2）、vuex保存的数据是响应式的

3）、vuex保存的数据可以跟踪状态的变化

3、vuex的（核心概念）配置项：

1）、state : 数据仓库 ，存储所有的 共享数据 ，相当于vue组件里的data 2）、Getters ： 在state的基础上 派生的数据， 相当于vue组件里 computed 3）、Mutations：修改state的数据时，用mutation，这与跟踪状态 有关系，只能有同步代码 4）、Action：解决mutation里只能有同步代码的问题，action里可以有异步代码

5）、modules：模块化

4、vuex的数据流转

vue组件 派发（dispatch）action。action里提交（commit）mutation，mutation里修改（mutate）state的数据，state的数修改后，会响应式渲染到模板上。

5、模块化怎么使用。

1）、当项目比较大时，所有的全局数据存放在state里，会非常混乱，怎么办？使用module，把数据分门别类的进行处理，即：模块化。 每个模块是一个独立的store。然后由总体的store引入所有的分模块store。

2）、怎么解决（getters，mutations，actions）的重名

1）、namespaced：true

2）、使用模块中getters，mutations，actions时，前面需要加上模块名：

格式：

模块名/getters或者mutations或者actions的名字

6、辅助函数

mapState, mapGetters,mapMutations, mapActions

1）、作用：

简化代码：在组件里不需要使用$store 了。

2）、具体使用：

mapState, mapGetters 会映射到组件的computed上

mapMutations, mapActions 会映射到组件的methods里。

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuexStore from './VuexStore/index'
const app = createApp(App)
app.use(router);
app.use(vuexStore)
app.mount('#app')

countStore.js
const countStore = {namespaced: true,state: () => ({sum: 0,school: '第一学校',address: '西安',time: new Date()}),mutations: {increment(state, payload) {console.log('Increment called with payload:', payload);state.sum += payload;}},actions: {},getters: {bigSum(state) {return state.sum * 10;},formatDate(state) {return new Date(state.time).toLocaleString();}}
}
export default countStore;

talkStore.js
import axios from 'axios'
import { nanoid } from 'nanoid'const talkStore = {namespaced: true,state: () => ({list: JSON.parse(localStorage.getItem('talkList')) || []}),mutations: {addLove(state, obj) {state.list.unshift(obj)localStorage.setItem('talkList', JSON.stringify(state.list))}},actions: {async getLove({ commit }) {let res = await axios.get('https://v1.hitokoto.cn')let obj = {id: nanoid(),title: res.data.hitokoto}commit('addLove', obj) // 调用 mutation 更新状态}},getters: {}
}
export default talkStore;

import { createStore } from 'vuex';
import countStore from './modules/countStore'
import talkStore from './modules/talkStore'
const vuexStore = createStore({modules: {useCountStore: countStore,useTalkStore: talkStore}
})
export default vuexStore;

<template><h2>求和：{{ sum }}，放大10倍：{{ bigSum }}</h2><p>学校：{{ school }}</p><p>时间：{{time}}</p><p>位置：{{ address }}</p><p>格式化时间：{{ formatDate }}</p><button @click="add">批量修改（修改sum,bigSum也会被修改</button><hr><button @click="getLoveFn">获取一句土味情话</button><ul><li v-for="item in list" :key="item.id">{{ item.title }}</li></ul>
</template>
<script setup>
import { computed } from 'vue';
import { useStore,mapMutations, mapGetters } from 'vuex';const store = useStore();
const sum = computed(() => store.state.useCountStore.sum);
const bigSum = computed(() => store.getters['useCountStore/bigSum']);
const school = computed(() => store.state.useCountStore.school);
const time = computed(() => store.state.useCountStore.time);
const address = computed(() => store.state.useCountStore.address);
const formatDate = computed(() => store.getters['useCountStore/formatDate']);
const add = () => {store.commit('useCountStore/increment', 30); // 同步代码commit
}
const list = computed(() => store.state.useTalkStore.list);
const getLoveFn=()=>{store.dispatch('useTalkStore/getLove'); // 异步代码dispatch
}
</script>