this.$store.commit 存储之后怎么取出来

时间: 2023-09-11 22:06:29 浏览: 163

【JavaScript源代码】vue简单的store详解.docx

vue简单的store详解　　vue中的store最简单的应用就是全局存储了。　　我这里使用了两个组件在相互跳转（Helloworld.vue和twopage.vue），前者是用来向store中放数据的，后者是从store取数据的。　　首先需要安装vuex： npm install vuex --save ；　　因为要跳转所以少不了安装路由router：npm install vue-router --save　　新建store文件夹在里面新建modules文件夹、getters.js、index.js；　　在modules建mystate.js　　mystate中放我们的变量msg：　 ### JavaScript源代码：Vue简单Store详解 #### 一、引言在现代前端开发中，Vue.js 是一种非常流行的框架，它提供了灵活且强大的工具来构建用户界面。当应用程序变得越来越复杂时，状态管理就显得尤为重要。为了有效地管理全局状态，Vue 提供了一个官方的状态管理模式——Vuex。 #### 二、基本概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 #### 三、环境搭建与初始化 1. **项目初始化**： - 创建一个新的 Vue 项目。 - 使用命令行工具安装 Vuex 和 Vue Router： ```bash npm install vuex vue-router --save ``` 2. **目录结构**： - 在项目的根目录下创建 `store` 文件夹。 - 在 `store` 文件夹内创建以下文件和文件夹： - `modules` 文件夹 - `getters.js` - `index.js` 3. **定义状态 (State)**： - 在 `modules` 文件夹下创建 `mystate.js` 文件。 - 定义初始状态： ```javascript const state = { msg: '这是我的状态', }; export default { state }; ``` 4. **定义 Getter**： - 在 `getters.js` 文件中定义获取状态的方法。 ```javascript const getters = { msg: state => state.mystate.msg, }; export default getters; ``` 5. **配置 Store**： - 在 `index.js` 文件中创建 Vuex Store。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; import getters from './getters'; Vue.use(Vuex); // 自动加载所有模块 const modulesFiles = require.context('./modules', true, /\.js$/); const modules = modulesFiles.keys().reduce((modules, modulePath) => { const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1'); const value = modulesFiles(modulePath); modules[moduleName] = value.default; return modules; }, {}); const store = new Vuex.Store({ modules, getters, }); export default store; ``` 6. **注册 Store**： - 在 `main.js` 文件中引入并注册 Store 和 Router。 ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App), }).$mount('#app'); ``` 7. **组件交互**： - 创建两个 Vue 组件 `Helloworld.vue` 和 `twopage.vue`。 - 在 `Helloworld.vue` 中设置数据到 Store。 - 在 `twopage.vue` 中读取 Store 中的数据。 - 通过 Vue Router 实现组件间的导航。 #### 四、总结本文介绍了如何使用 Vuex 进行简单状态管理的基本流程。通过定义状态、Getter、Mutation 和 Action，我们可以实现全局状态的统一管理。这对于构建大型应用来说是非常有帮助的，可以提高代码的可维护性和可扩展性。同时，合理的目录结构和组织方式也能够帮助我们更好地理解和管理代码。

使用this.$store.state来获取存储在Vuex中的数据。例如： ``` // 存储数据 this.$store.commit('setUserName', 'John') // 获取数据 console.log(this.$store.state.userName) // 输出John ``` 在这个示例中，我们使用了一个名为“setUserName”的mutation来存储用户名。然后我们可以使用this.$store.state.userName来获取这个值并输出它。

阅读全文

this.$store.commit 存储之后怎么取出来

相关推荐

Vue.js 中的Vuex深度解析：集中式状态管理

Vue.js vuex状态管理深度解析与实战应用

vuex 解决报错this.$store.commit is not a function的方法

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

this.$store.commit('setInputValue', inputValue)

this.$store

怎么往this.$store.state存数据

this.$store.commit 对对象的增删改

async submitForm(obj) { console.log(obj) const { data } = await loginApi(obj) console.log(data) const { code, msg } = data this.$store.commit('user/getToken', data.data.token) if (code === 200) { Message.success(msg) this.$router.push('/404') } else { Message.error(msg) } }

vue中点击某一行，跳转到对应页面，并把当前行的id 通过 this.$store.commit存入vuex中定义，在对应页面中获取到该id的值，代码实现

vue this.$store.commit

methods: { logout() { this.$store.commit("removeToken"); }, },解释代码

this.$store.dispatch()参数

this.$store .dispatch

this.$store.commit('permission/SET_SIDEBAR_ROUTERS', [item]);

await this.$store.dispatch('user/logout') this.$router.push(/login?redirect=${this.$route.fullPath})

最新推荐

基于Flask，mysql slope one的图书推荐系统全部资料+详细文档.zip

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

流程控制与循环结构详解：J750编程逻辑构建指南

python实现生成一个窗口，其窗口题目为“二冷配水模型模型”，窗口中包含八个输入栏，三个按钮，每个按钮点击后会产生一个不同的页面

MATLAB实现变邻域搜索算法源码解析

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序