1. Vuex 的集中式管控
1.1.基础配置
安装依赖文件
shell
npm install --save vuex挂载 VueX 实例
tsx
import store from "./store";
app.use(store);1.2. 快速开始
编写仓库的主入口文件
jsx
import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user"; //用户信息仓库
import setting from "./modules/setting"; //设置信息仓库
const store = new Vuex.Store({
modules: {
user,
setting,
}, //模块化仓库
}); //创建主仓库入口
export default store; //导出主仓库编写分支仓库文件（user 为例）
tsx
import { TOKEN_NAME } from "@/config/global";
const InitUserInfo = {
roles: [],
};
// 定义的state初始值
const state = {
userInfo: InitUserInfo,
};
const mutations = {
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
},
};
const getters = {
token: (state) => state.token,
roles: (state) => state.userInfo?.roles,
};
const actions = {
async logout({ commit }) {
commit("removeToken");
commit("setUserInfo", InitUserInfo);
},
};
export default {
namespaced: true,
state,
mutations,
actions,
getters,
}; //依次导出每个数据项组件获取数据
tsx
import { useStore } from "vuex";
const { userInfo } = this.$store.state.user; //vue2
//或者
const store = useStore();
const userinfo = computed(() => store.state.user.userInfo); //vue31.3 getters 属性
创建 getters
tsx
const state = () => ({
cartList: [
{ name: "乒乓球", price: 5 },
{ name: "排球", price: 120 },
{ name: "运动饮料", price: 10 },
{ name: "运动鞋", price: 200 },
{ name: "纸巾", price: 20 },
],
});
const getters = {
getList: (state) => state.cartList,
getListLow: (state) => (num) => {
return state.cartList.filter((item) => item.price < num);
},
};使用 getters
tsx
const cartList = computed(() => store.getters["user/getList"]);
//或者
const cartList = computed(() => store.getters["user/getList"](50)); //传参数1.4 Mutation 属性
注意:在 Vuex 中，mutation 都是同步事务，要处理异步操作需要使用到 Action。
创建 Mutation
tsx
const mutations = {
increment(state) {
state.num++;
},
}; //没有payload的
const mutations = {
increment(state, payload) {
state.count += payload.amount;
},
}; //具有payload的使用 Mutation
tsx
store.commit("increment");
//或者
store.commit("increment", {
amount: 10,
}); //具有payload的1.5 Action 属性
在 Vuex 中，mutation 都是同步事务，要处理异步操作需要使用到 Action。
创建 Action
tsx
const actions = {
increment(context) {
// context.commit('increment');
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit("increment");
resolve();
}, 500);
});
},
};使用 Action
tsx
store.dispatch('count/increment'{a: 123}).then(() => {
console.log('-----执行完action');
// 这里写一些逻辑
});
//也可以不返回promise 在函数里面直接处理即可2. Pinia--更现代化的状态管理库
2.1.基础配置
安装依赖文件
shell
yarn add pinia
# 或者使用 npm
npm install pinia挂载 VueX 实例
tsx
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
import "../src/assets/main.css";
const app = createApp(App);
app.use(createPinia());
app.mount("#app");2.2. 基础使用
编写一个 Store
tsx
import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user"; //用户信息仓库
import setting from "./modules/setting"; //设置信息仓库
const store = new Vuex.Store({
modules: {
user,
setting,
}, //模块化仓库
}); //创建主仓库入口
export default store; //导出主仓库编写分支仓库文件（user 为例）
tsx
import { defineStore } from "pinia";
const chatStore = defineStore("chat", {
state: () => {
return {
cartNum: 100,
totalPrice: 120043,
};
},
});
export default chatStore;组件获取数据
tsx
<script setup>
import useChatStore from "../store/chat"
const chatStore=useChatStore();
</script>
<template>
<h1>商品数量:{{ chatStore.cartNum }}</h1>
<h1>商品总价:{{ chatStore.totalPrice }}</h1>
</template>状态更新
仅仅在一个组件内的状态数据更新，仓库会自动同步更新数据
tsx
<script setup>
import useChatStore from "../store/chat"
let chatStore=useChatStore();
const handleAdding=()=>{
chatStore.cartNum++;
}
</script>
<template>
<h1>商品数量:{{ chatStore.cartNum }}</h1>
<h1>商品总价:{{chatStore.totalPrice }}</h1>
<button @click="handleAdding">加1</button>
</template>
<style scoped>2.3.Getters 属性
Getter 是 defineStore 参数配置项（State、Getter、Action）里面的一个属性。Getter 属性是一个对象，该对象里面是各种方法。我们可以把 Getter 看成 Vue 中的计算属性，它的作用就是返回一个新的结果。
设置仓库 Getters
tsx
import { defineStore } from "pinia";
const chatStore = defineStore("chat", {
state: () => {
return {
cartNum: 100,
totalPrice: 120043,
courseList: [
{ name: "前端开发", person: 300 },
{ name: "Java开发", person: 500 },
{ name: "golong", person: 120 },
{ name: "CPP", person: 390 },
{ name: "Python", person: 220 },
{ name: "ios", person: 320 },
],
};
},
getters: {
getHotCourse: (state) => {
let newList = state.courseList.filter((item) => {
return item.person >= 300;
});
return newList;
},
},
});
export default chatStore;组件调用 Getters
tsx
<script setup>
import useChatStore from "../store/chat"
let chatStore=useChatStore();
const newList=chatStore.getHotCourse
</script>
<template>
<hr/>
<h1>热门课程</h1>
<ul>
<li v-for="(item,index) in newList">{{ item.name }}有{{ item.person }}人</li>
</ul>
<hr/>
</template>2.4.Actions 属性
前面提到的 State 和 Getter 属性都主要是 数据层面的，并没有具体的业务逻辑代码，它们两个就和我们组件代码中的 data 数据和 computed 计算属性一样。如果我们有 业务代码 的话，最好写在 Actions 中，该属性就和我们组件代码中的 methods 相似，用来放置一些处理业务逻辑的代码。
异步和同步的逻辑都可以放到 Action 中
编写 Actions 逻辑
tsx
import axios from "axios";
import { defineStore } from "pinia";
const chatStore = defineStore("chat", {
state: () => {
return {
orderList: [],
};
},
actions: {
getOrderList: async function (value) {
console.log(value); //获取组件的传递的参数
let data = await axios.get(
"https://mock.presstime.cn/mock/64a92865ace0545a9f40face/weapp/portroyal"
);
this.$state.orderList = data.data.listData;
},
},
});
export default chatStore;组件使用
tsx
<script setup>
import useChatStore from "../store/chat"
let chatStore=useChatStore();
const handleGet=()=>{
chatStore.getOrderList("第一组件点击了")
}
</script>
<template>
<button @click="handleGet">获取orderlist的数据</button>
<hr/>
<h1 >数据数据</h1>
<ul>
<li v-for="(item,index) in chatStore.orderList">{{ item.Title }}是{{ item.Score }}分 ，排{{ index+1 }}名</li>
</ul>
<hr/>
</template>2.5 持久化存储
安装依赖
shell
yarn add pinia-plugin-persistedstate
or
npm i pinia-plugin-persistedstate挂载实例
tsx
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import { createApp } from "vue";
import "../src/assets/main.css";
import App from "./App.vue";
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.mount("#app");仓库进行配置
tsx
import axios from "axios";
import { defineStore } from "pinia";
const chatStore = defineStore("chat", {
//persist: true, //全部数据开启持久化存储
persist: {
key: "chatssss", //存储键值对的键名称
storage: window.localStorage, //存储方式
paths: ["data2", "picData"], //需要存储的数据(按需存储)
}, //部分数据开启持久化存储
state: () => {
return {
orderList: [],
data1: "2228",
data2: "866666335",
data3: "8765",
picData: 2222222,
};
},
actions: {
getOrderList: async function (value) {
console.log(value); //获取组件的传递的参数
let data = await axios.get(
"https://mock.presstime.cn/mock/64a92865ace0545a9f40face/weapp/portroyal"
);
this.$state.orderList = data.data.listData;
},
},
});
export default chatStore;