Vuex 的集中式管控全解析

hfLiu_X2023-12-01 14:16

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); //vue3

1.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;
相关推荐
大猫会长11 分钟前
mac中创建 .command 文件，执行node服务
前端·chrome
旧时光_11 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101013 分钟前
深入理解useState：批量更新与非函数参数支持
前端
windliang13 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi14 分钟前
# Bsin-App Uni：面向未来的跨端开发框架深度解析
前端
G等你下课17 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥18 分钟前
pixijs 的填充渲染错误，如何处理？
前端
snakeshe101018 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋20 分钟前
深入浅出 JavaScript 闭包：从核心概念到框架实践
前端
snakeshe101022 分钟前
用100行代码实现React useState钩子：多状态管理揭秘
前端
热门推荐
01集群聊天服务器---MySQL数据库的建立02GPU 进阶笔记（二）：华为昇腾 910B GPU03Coze扣子平台完整体验和实践（附国内和国际版对比）04使用Ruby接入实时行情API教程05Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Java学习第十五部分——MyBatis08扣子空间的使用教程与大模型技术思考09DeepSeek各版本说明与优缺点分析10基于odoo17的设计模式详解---装饰模式