Vuex

最新推荐文章于 2024-09-20 22:35:21 发布

琉璃街

最新推荐文章于 2024-09-20 22:35:21 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuex 文章标签： Vuex

本文链接：https://blog.youkuaiyun.com/qq_44676460/article/details/99685528

Vuex 专栏收录该内容

1 篇文章

订阅专栏

前言：

在vue中一般传值有两种，

一、父组件–>子组件，通过子组件的自定义属性：props

子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…);

二、通过数据总数Bus，this. $r o o t .$ emit(‘事件名’,参数1,参数2,…)

这两种都有不足点，
第一种，如果参数有很多，会导致编写麻烦和代码臃肿。
第二种，如果组件够多，事件名难记容易混淆，不方便组件的传值。

所以在这里运用到第三中方法，VueX！！！！

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

使用

1，首先安装Vuex：
在cmd中输入：npm install vuex -S

2，创建store模块，分别维护state/actions/mutations/getters

Vuex分成五个部分：

1.State：单一状态树

2.Getters：状态获取

3.Mutations：触发同步事件

4.Actions：提交mutation，可以包含异步操作

5.Module：将vuex进行分模块

在这里插入图片描述
3，然后在store创建index.js文件，并且新建vuex的store实例，并注册上面引入的各大模块

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

4，在main.js中导入

//  ./代表的是同一目录下
import store from './store'

和组件一样，还要在Vue里面挂载

new Vue({
  el: '#app',
	data(){
		return{
			aa:new Vue({
				
			})
		}
	},
  router,
	store,
  components: { App },
  template: '<App/>'
})

完成到这一步即可自己编写功能了。

实例

那几个js是干嘛用的呢？我用例子来告诉大家
在state.js里面放的是你要用到的变量，我在此实例一个变量：

export default {
		resturantName: '飞歌餐馆'
}

然后在mutations.js里写一个赋值方法：

export default {
	setResturantName: (state, payload) => {
		state.resturantName = payload.resturantName;
	}
}

getters.js写一个获值方法：

export default {

	getResturantName: (state) => {
		return state.resturantName;
	}
}

即可简单的运用了：

<template>
	<div>
		<h3>第一个VueX页面{{title}}</h3>
		<button @click="changeTitle">餐馆易主</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			changeTitle() {
				this.$store.commit('setResturantName', {
					resturantName: '狗蛋不吃蛋'
				});
			}
		},
		computed: {
			title() {
				return this.$store.getters.getResturantName;
			}
		}
	}
</script>

当我点击餐馆易主按钮，title的值会变成我自己设置的值。这里运用的是getters.js中的方法。

你也可以使用this.$store.state.resturantName;效果是一样的，但不建议使用这种。

要调用mutations.js中的方式：

第一个参数放的是调用的方法名，第二个是json格式的参数。

changeTitle() {
	this.$store.commit('setResturantName', {
		resturantName: '狗蛋不吃蛋'
	});
}

那么actions.js里面写的是什么呢？其实和mutation.js没多大区别，

actions.js里写的是异步的方法，
mutation.js则写的是同步的。
两者区别：
调用表格mutation.js的语句：

this.$store.commit('setResturantName', {
					resturantName: '狗蛋不吃蛋'
				});

调用actions.js语句：

this.$store.dispatch('setResturantNameAsync', {
					resturantName: '蛋不吃狗'
				});

值得一提的是，在这里面是不能实例vue的，
如果硬要实例可以把它当做参数传过来：
actions.js：

doAjax: (context, payload) => {
		//vue是不能使用实例的
		let _this = payload._this;
		let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;
		// let url = 'http://localhost:8080/SSH/vue/userAction_login.action';
		_this.axios.get(url, {}).then((response) => {
			console.log(response);
			console.log('ajax...........');
		}).catch((response) => {
			//carch则是异常  
			console.log(response);
		});
	}

html调用方法：

doAjax(){
	this.$store.dispatch('doAjax', {
		_this: this
	});
}

简单来讲，
state.js是存放参数的。
getters.js是存放获取值方法的。
mutation.js是存放同步方法的。
actions.js是存放异步方法的。