vuex状态管理简单入门

1.安装vuex

npm i --save-dev vuex
复制代码

2.为了方便管理，在src目录下新建文件夹store

新建index.js进行初始化
新建state.js进行数据存储
新建mutations.js保存数据修改的方法
复制代码

3.开始编写配置文件

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({// 存储数据state,// 修改方法mutations
})
复制代码

在main.js中引入并实例化

import store from '@/store/index'
new Vue({el: '#app',router,// 实例化storestore,render: h => h(App)
})
复制代码

4.到这里vuex已经配置完成，只要在state.js中写入数据即可在项目中引用了

state.js

const state = {
//这里以常用的用户id为例，可以是任意你想保存的数据userId: '0123456789'
}
export default state
复制代码

5.现在你就可以在项目中的任何组件取到用户id，方法如下(关于map的作用就自己查阅资料吧)

import { mapState } from 'vuex'
export default {computed: {...mapState({userId: state => state.userId})},// 然后在你需要的地方使用this.userId即可，如created () {console.log(this.userId)}
}
复制代码

6.关于修改state中属性的值

还是以用户id为例，每个用户保存的值必然是不同的，这个值需要用mutations中的方法来修改

mutations.js

const mutations = {
//save_userId是方法名， userId是传入的修改值save_userId (state, userId) {state.userId = userId}
}export default mutations
复制代码

7.在需要保存用户id的地方调用mutations中的方法进行保存

import { mapMutations } from 'vuex'
export default {
// 引入方法save_userId方法methods: {...mapMutations({save_userId: 'save_userId'})}
// 保存或修改数据created () {this.save_userId('987654321')}
}
复制代码

8.到这里数据的存储也完成了,取数据只要用第5步的方法即可，vuex的简单使用也不复杂，希望刚入门的小伙伴看完有所收获吧，之后有空在推出与actions相关的部分。

转载于:https://juejin.im/post/5afcb72a6fb9a07aab2a0c3e

vuex状态管理简单入门相关推荐

vuex状态管理，用最朴实的话讲解最难懂的技术，
一.案例演示引入vuex 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm n install vuex --save 需要注意的是这里一定要加上 –sa ...
Vuex 状态管理的工作原理
Vuex 状态管理的工作原理为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...
[vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
Vue项目成员管理系统 Vuex状态管理(10)
Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式储存管理应用的所有组件的转台并以相应的规则保证装填以一中可预测的方式发生变化. Vuex可以将组件中的某些属性.值或者方法拿出来统 ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
【3D商城】使用Vuex状态管理完成购物车模块
[3D商城]使用Vuex状态管理完成购物车模块创建购物车的全局数据添加产品到购物车导航栏的购物车模块结果常见问题总结创建购物车的全局数据在store的index.js中 ,创建购物车变量 ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
【vuex状态管理案例mutations和actions区别】
目录 vuex 状态管理传统组件传值的缺点案例加减效果现在我们希望它是两个计数器的数同时加加减~ 先来看一下减的父组件子组件加的是一样的逻辑哦虽然这样可以实现我们想要的效果但是,还是 ...
vue从入门到进阶：Vuex状态管理（十）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...

vuex状态管理简单入门

1.安装vuex

2.为了方便管理，在src目录下新建文件夹store

3.开始编写配置文件

index.js

在main.js中引入并实例化

4.到这里vuex已经配置完成，只要在state.js中写入数据即可在项目中引用了

state.js

5.现在你就可以在项目中的任何组件取到用户id，方法如下(关于map的作用就自己查阅资料吧)

6.关于修改state中属性的值

还是以用户id为例，每个用户保存的值必然是不同的，这个值需要用mutations中的方法来修改

mutations.js

7.在需要保存用户id的地方调用mutations中的方法进行保存

8.到这里数据的存储也完成了,取数据只要用第5步的方法即可，vuex的简单使用也不复杂，希望刚入门的小伙伴看完有所收获吧，之后有空在推出与actions相关的部分。

vuex状态管理简单入门相关推荐

最新文章

热门文章