Vuex学习总结

官方文档

https://vuex.vuejs.org/zh/

概述

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存入

组件之间需要进行频繁共享的数据！

引入和使用

安装Vuex

npm install vuex --save

导包使用

import Vuex from 'vuex'

Vue.use(Vuex)

创建store对象

state是用来存储全局共享的数据的！

const store = new Vuex.Store({
	state:{
		data:''
	}
})

挂载store对象

new Vue({
	el:'#app',
	render:h=>h(app),
	router,
	store
})

常见项目中使用方式（建议看这个）

1. 安装

npm install vuex --save

2.在src下创建store目录创建index.js文件

3.在index.js中进行实例化并且暴露出store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    data:''
  }
})

4.在main.js中进行挂载

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vuex的核心

State（共享数据仓库）

我们要将希望共享的数据放入State中进行存储

export default new Vuex.Store({
  state: {
    data:''
  }
})

存储后如何进行获取

方式1（全部获取）

this.$store.state.你要获取的变量名

方式2（按需获取）

//在需要的组件中导入mapState
import {mapState} from 'vuex'

//在computed计算属性中进行映射
computed:{
	...mapState(['你要获取的变量名'])
}

Mutation（修改State中的数据）

只能通过mutation变更Store数据，不可以直接操作 Store 中的数据。
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有教据的变化。
注意：不能使用异步操作

export default new Vuex.Store({
  state: {
    data:''
  }，
  mutations:{
		function名(state){
				//处理
			}
	},
})

在组件中调用Mutation中的方法1

this.$store.commit('你要调用的函数名')

例如：
在app.vue中调用init方法

<template>
  <div>
  	<div @click="initMethod"></div>
  </div>
</template>

<script>
export default {
 methods:{
 	initMethod(){
 		this.$store.commit('init')
 	}	
 }
}
</script>

<style lang="less" scoped></style>

调用同时传参

this.$store.commit('你调用的函数名',参数)

在组件中调用Mutation中的方法2

和state很像

<template>
  <div>
  	<div @click="initMethod"></div>
  </div>
</template>

<script>
//导入mapMutations
import {mapMutations} from 'vuex'
export default {
 methods:{
 	...mapMutations(['你要调用的函数名']),
 	initMethod(){
		this.你要调用的函数名()
	}
 }
}
</script>

<style lang="less" scoped></style>

调用同时传参

initMethod(){
		this.你要调用的函数名(参数)
	}

Action（处理异步操作）

export default new Vuex.Store({
  state: {
    data:''
  }，
  mutations:{
		function名(state){
				//处理
			}
	},
	actions:{
		//异步处理
	}
})

例子（很简单推荐看例子）

在store.index.js中

export default new Vuex.Store({
  state: {
    data:''
  }，
  mutations:{
		init(state){
				state.data = 'hello world'
			}
	},
	actions:{
		handle(context){
			context.commit('init')
		}
	}
})

在组件中进行调用

<template>
  <div>
  	<div @click="initMethod">{{$store.state.data}}</div>
  </div>
</template>

<script>
//导入mapMutations
import {mapMutations} from 'vuex'
export default {
 methods:{
 	initMethod(){
		this.$store.dispatch('handle')
	}
 }
}
</script>

<style lang="less" scoped></style>

简化在store中调用commit（推荐）

用{commit}直接代替context

export default new Vuex.Store({
  state: {
    data:''
  }，
  mutations:{
		init(state){
				state.data = 'hello world'
			}
	},
	actions:{
		handle({commit}){
			commit('init')
		}
	}
})

其实action的调用也有两种方式但是我第二种从来用，就是和mutation的第二种一毛一样，所以就不写了！函数是mapActions

import {mapActions} from 'vuex'

Getter(对store的state中的数据加工)

Getter可以对Store 中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。（原始数据不会改变，其实是一种硬链接形式）（硬链接就是复制一份数据放入内存中，形成新的内存空间，然后调用变量指向新的内存地址）
Store 中数据发生变化，Getter的数据也会跟着变化。

例子

export default new Vuex.Store({
  state: {
    data:''
  }，
 getters:{
		newData:state=>{
			let newer = state.data + 'hello world'
			return newer
		}
	}
})

在组件中进行引用方法1

this.$store.getters.newData

引用方法2

import {mapGetters} from 'vue'

computed:{
	...mapGetters(['newData'])
}