vuex简单使用

最新推荐文章于 2024-07-06 21:21:13 发布

原创最新推荐文章于 2024-07-06 21:21:13 发布

· 257 阅读

1 ·

版权

Vue 专栏收录该内容

24 篇文章

订阅专栏

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