Vuex初始化

最新推荐文章于 2023-03-08 17:21:50 发布

杨乐多dreamer

最新推荐文章于 2023-03-08 17:21:50 发布

阅读量1.3k

点赞数

分类专栏：项目问题汇总 vue学习笔记文章标签： javascript 前端 node.js

本文链接：https://blog.csdn.net/qq_44743216/article/details/125173658

版权

本文介绍了Vuex作为Vue.js应用的状态管理模式，并分享了一种高效管理Vuex初始化的方法。详细阐述了Vuex的目录结构，包括actions.js、getters.js、index.js、mutation-types.js、mutations.js和states.js各文件的作用。在项目初始化时，如何根据需求逐步构建这些文件，特别是在main.js中注入Vuex的实践。

摘要由CSDN通过智能技术生成

1、Vuex是一个专为Vue.js应用程序开发的状态管理模式。

2、在开发中遇到了一种能够高效管理Vuex的初始化方式。在此记录下来

3、目录结构：src/store

actions.js （处理异步操作或对mutations的封装）
getters.js （对状态的获取）
index.js （入口文件）
mutation-types.js （存储mutations相关的字符串常量）
mutations.js （对状态的修改）
states.js （存储所有状态）

4、文件内容：

（1）state.js

	// 存放state数据
	const state = {
   
	  // 是否登录
	  loginStatu: null,
	  // 用户信息
	  userInfo: null,
	  
	}
	export default state

（2）getters.js

// 对状态的获取

// 登录状态
export const loginStatu = state => state.loginStatu || JSON.parse(window.localStorage.getItem('loginStatu'))

// 用户信息
export const userInfo = state => state.userInfo ||