Vuex使用的详细教程

什么是Vuex?

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

个人理解:
vuex就是一个状态管理的工具,如果我们没有用vuex,那么每个组件之间的传值就只能通过存储的方式来存储。这样一旦项目大了过后就不利于数据状态的管理。所以如果我们用到了vuex那么就会方便管理很多。

引入Vuex

1.新建一个目录store,在目录下新建一个index.js文件
Vuex使用的详细教程
2.在index.js中添加以下代码:

import Vue from "vue"
import Vuex from "vuex"
//引入cart的vuex模块
import cart from "@/store/modules/cart.js"
Vue.use(Vuex)
export default new Vuex.Store({
	//当做data
	state:{
	},
	//相当于计算属性
	getters:{
	},
	//同步一些方法
	mutations:{
	},
	//存放异步的方法
	actions:{
	}
})

这里面的state就相当于data,getters相当于computed,mutations存放同步的方法,actions存放异步的方法。

3.在main.js中引入vuex

import Vue from 'vue'
import App from './App'
import store from './store'       //引入vuex
Vue.prototype.$store = store      //引入vuex
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	store, 						  //引入vuex
    ...App
})
app.$mount()

上面备注引入vuex的代码就是需要添加的。
这样vuex就引入成功了。

state的多种用法

我们通常会把全局或者常用变量放在state中。我们假设一个购物的场景,当我们添加商品到购物车的时候,这时候数据就会在购物车的页面中使用,所以我们就可以将数据存放在state中。如果其它页面想要拿取,直接调用即可。
我们在state中创建一个list数组:
Vuex使用的详细教程
然后创建一个购物车的Vue页面
第一种方法
在onLoad方法中写一下代码:

console.log(JSON.stringify(this.$store.state.list));

结果:
Vuex使用的详细教程
第二种用法:
在Vue页面中引入:mapState

import {mapState} from "vuex"

在computed中添加以下代码:

...mapState({
	list:"list",
}),  

onload中:

console.log(JSON.stringify(this.list));

测试结果:
Vuex使用的详细教程
第三种方法:

在computed中添加以下代码:

newList(state) {   //   可以进行过滤操作
		return state.list.filter(v=> v.status)
}

onload中:

console.log(JSON.stringify(this.newList));

测试结果:
Vuex使用的详细教程
对商品进行过滤,只输出true的结果。

Getters的多种用法

第一种用法:
在getters中添加以下代码:

//拿到状态为true的商品
activeList:(state)=>{
	//返回状态为true的数据
	return state.list.filter(v=>v.status)
},

onload中:

console.log(this.$store.getters.activeList);

结果:
Vuex使用的详细教程
返回status为true的商品。

第二种用法:
Vue页面引入mapGetters

import {mapState,mapGetters} from "vuex"

在getters中添加以下代码:

//拿到状态为true的商品
activeList:(state)=>{
	//返回状态为true的数据
	return state.list.filter(v=>v.status)
},

在computed中添加以下代码:

...mapGetters([
	'activeList',
])

onload中:

console.log(JSON.stringify(this.activeList));

结果:
Vuex使用的详细教程
返回status为true的商品。
第三种用法:
将…mapGetters([])改为…mapGetters({}),这样可以将方法重命名。
在computed中添加以下代码:

...mapGetters({
	//重命名
	active:'activeList',
})

onload中:

console.log(JSON.stringify(this.active));

结果:
Vuex使用的详细教程
返回status为true的商品。

Mutations的多种

这个存放许多的同步方法。
第一种方法:
在mutations中添加以下代码:

inc(state,n) {
			state.number += n;
			console.log(3333);
		}

onload中:

this.$store.commit('inc');

结果:
Vuex使用的详细教程
输出了3333。
第二种用法:
在Vue的页面中引入:

import {mapState,mapGetters,mapMutations} from "vuex"

在methods中添加以下代码:

// 引入mapMutations
...mapMutations([
		'inc'
	]),

onload中:

this.inc() 	

结果:
Vuex使用的详细教程
输出了3333。
第三种方法
和getters一样
在state中添加一个number:
Vuex使用的详细教程
修改mutations代码:

//同步一些方法
	mutations:{
		inc(state,n) {
			state.number += n;
			console.log(state.number);
		}
	},

在methods中添加以下代码:

...mapMutations({
				Inc2:'inc'
			}),

onload中:

this.Inc2(10)

结果:
Vuex使用的详细教程
2+10=12,说明没有问题。

Action方法的用法

action里面存放都是异步的方法
第一种用法:
在action中添加以下代码:

AsyncInc({commit,state},n) {
	// 定时执行
	setInterval(()=>{
		commit('inc',20)
		console.log(state.number);
	},2000)	
}

onload中:

this.$store.dispatch('AsyncInc')

输出结果:
Vuex使用的详细教程
没2秒都会调用inc方法自动加20。
第二种方法:
在action中添加以下代码:

AsyncInc({commit,state},n) {
			// 定时执行
			setInterval(()=>{
				commit('inc',n)
				console.log(state.number);
			},2000)	
		}

在methods中添加以下代码:

...mapActions([
				'AsyncInc'
			])

onload中:

this.AsyncInc(100) 

结果:
Vuex使用的详细教程
没2秒自动加100,说明没有问题。

Vuex的模块化实现

当我们的项目很大的时候,就会产生很多的数据和方法,如果我们都放在index.js中那么会很不方便管理,所以我们就将vuex进行模块化。
我们在store中建一个modules文件,并且里面新建一个cart.js文件,我们就可以将购物车的vuex数据写在里面。
Vuex使用的详细教程
然后再index.js中引入cart模块:

import Vue from "vue"
import Vuex from "vuex"
import cart from "@/store/modules/cart.js //引入cart的vuex模块
Vue.use(Vuex)
export default new Vuex.Store({
	modules:{
		cart:cart,//引入模块
	}
})

在state中需要在state的后面加上模块的名字,列如:

this.$store.state.cart.list

这样就会知道是cart模块的list。

然后需要注意的地方就是:
1.每个模块中state的名字不能重复
2.每个模块中getter只执行一个
3.mutations和actions都执行

感谢大家的观看!如有不足请评论指出,谢谢!

Vuex使用的详细教程Vuex使用的详细教程 xinyang_yy 发布了53 篇原创文章 · 获赞 5 · 访问量 4563 私信 关注
上一篇:微信小程序Demo-购物商城


下一篇:AngularJS案例 购物车计算器