vuex

Vuex

1.什么是vuex

	vuex是全局状态管理工具,开发vuex的主要原因是因为当我们遇到多个组件共
	享状态时,组件的传值会导致代码难以维护,所以vuex是为vue开发的一款状
	态管理工具,主要的核心分别为state,getters,mutations,actions,modules

2.vuex在项目中的使用

	1.安装vuex
		cnpm install vuex -save
	2.在src目录下创建store文件夹
	3.在store文件夹内创建index.js文件
	4.在index.js 文件内引入 vue 和vuex 
								import Vue from "vue"
								import Vuex from "vuex"
	5.注册vuex Vue.use(vuex);
	6.对vuex进行实例化
		 const store = new Vuex({
 				核心配置
			})  
	7.导出vuex
		 export default store 

	8.在main.js文件中引入store文件夹内的index.js文件
	 				import store from "./store"
	9.运行机制
		 在vue的组件中通过dispatch来调用actions中的方法
		 ,actions中通过commit来调用mutactions中的方法,
		 在mutactions可以直接操作state中的数据,state中
		 的数据只要发生改变就会立即响应给组件 	

3.state

	state是数据源载体
			 全局:
     			$store.state.定义的属性
 			 局部:        
     			this.$store.state.定义的属性

4.mutations

	mutations 唯一可以提交可以改变state的状态,也就是数据的属性值
			全局:
     			$store.commit("方法名")
 			局部:    
     			this.$store.commit("方法名")    

5.getters

	getters 用于改变state的值,派生出多个数据源

6.actions 异步

	actions提交的是mutations,它可以包含任何的异步操作,存在的原因就是
	因为mutations不能进行异步操作,所以通过actions这个函数来触发mutations,
	来获取你需要的一些数据

7.modules 命名空间的处理

	当一个项目store分的模块太多了的时候,在我们使用辅助函数,会很难查
	询state,mutations,action来自那个模块,不便于后期的代码维护,所以我
	们通过设置namespaced:true,的方式来将他变为带命名空间的模块

8.plugins

我们可以用plugin插件,添加长久存储插件

首先我们需要在vue脚手架中安装一下vuex-persist,来实现vuex数据的长久存储

9.vuex辅助函数

	辅助函数分为mapState,mapMutations,mapActions,mapGetters,
	在组件中引用:
	import {mapActions,mapState,mapMutations,mapGetters} from 'vuex'
	在方法中使用,可以定义一个方法,在方法中调用,
    methods:{
     ...mapMutations(["test"]),
        jump{
            this.test() //调用方法
        }
    }
	也可以直接
     @click = "test()"
   	 	methods:{
    	 ...mapMutations(["test"]),
   		 }

以上是基本的用法,当你用到名命空间的时候
…mapMutations(“模块的名称”,{“自定义的方法名”:“mutations中的方法名”})
使用这种方法的时候就不会在使用模块化的时候出现冲突的问题了,而且也便于后期的维护。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值