什么时候用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>