vuex简单使用

什么时候用vuex

当我们想要从一个组件传递一个参数到另外一个组件的时候,这两个组件不是父子组件,也不是兄弟组件,这样我们就可以用vuex(一个集中存贮数据的公共仓库)我觉得官网用于计算变量的在实际中并不是很常用,通常使用vuex就是存储一些变量,比如我在登录的时候获取到用户名,要展示在内页里,我就会把这个用户名存储在store中,在内页里取出来展示,还有在登录的时候获取到的一些权限数据,在内部进行权限分配的时候要用,就在会在登录之后获取到存在vuex中,需要判断权限的时候取出来,比如我想要在另外一个页面获取到这也页面的相关参数,我可以在这个组件里存起来,到另外一个组件里取出来,而不用传参。

例如

我们想把A组件变量 传给B组件 只需要两步

第一步: 在A组件的时候把变量studentObj 存到仓库里
第二步:在到B组件里把studentObj 从仓库里取出来

可见,vuex可以帮助我们管理共享状态,但是有很多概念和框架,这里我们只讲最简单的存取,关于模块化和计算的先不做。

什么是vuex

vuex是一个专门为vue.js应用程序开发的状态管理模式

vuex是适用于在vue项目开发时使用的状态管理工具,相当于一个状态管理仓库,或者说是一个响应式的全局变量

核心概念

  • state: 用来存储、定义共享变量
  • Mutation: 更改vuex的store中状态的方法在里面封装,通过提交mutation修改状态,
  • Getter:基于state的派生状态,如果组件中有计算或者或模块化用这个(本文是简单版不用)
  • Action:类似mutation,但是是基于mutation修改状态,但是可以异步操作(本文是简单版不用
  • Module :模块,在大型项目中为了方便状态的管理和协作开发将store拆分为多个子模块(modules),每个子模块拥有完整的state、mutation、action、getter

vuex怎么用

1、安装

如果你已经完成了Vue项目的创建,那么你就可以在该项目目录下执行下面指令。

npm i vuex -s
2、新建store/index

在这里插入图片描述
这里我把项目整个结构截图,store/index就在这里、在里面进行变量的定义、管理和派生
具体内容如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {  //定义变量stuName,可以定义多个
		stuName: '',
	},
	mutations: {  
		//存取学生姓名 用户通过触发这个方法,来保存数据,payload就是用户存进来的变量,这里赋值给 state.stuName.
		setStuName (state, payload) {
			state.stuName= payload
		},	
		setStuNameneDef (state) {  //这个方法没有payload变量,就是可以不传参数,调用该方法得默认变量名
		    state.stuName = '小明';
		}
	},
})
export default store

3、在main.js中引用
import Vue from 'vue'
import App from './App'
import store from 'store'   //这句话是引入store
import router from 'router'
import { RouterMount } from 'uni-simple-router'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
		store,
    ...App
})
4、存储数据

比如我们获取到了学生姓名,这时候把它保存在vux中 login.vue中

methods: {
		login () {
			login({ user, phone ,password ,way })
			.then( (data)=> {
				this.$store.commit('setStuName',data.name);  //把接口请求返回的变量存在store中
			})
		}
	}
5、使用数据

比如我们要在info.vue中使用这个学生的姓名信息就可以直接使用

<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.stuName}}</h1>
    </div>
</template>
6、结束
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值