【Vue】VUEX详解

一、Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

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

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。

二、Vuex的核心概念

1.State

state提供唯一的公共数据源，所有公共的数据都要放到store中的state中进行存储

const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0}
})

组件中访问state的第一种方式

this.$store.state.数据名称

template中不需要this.
{{$store.state.count}}

组件中访问state的第二种方式(辅助函数)

//从vuex中按需导入mapState函数
import {mapState} from ”vuex“
//通过mapState函数将当前组件需要的全局数据，映射为当前组件的computed计算属性
computed:{
	...mapState(['count'])
}

直接写count
{{count}}

2、Mutation函数

• 不可以直接操作元数据（拿到全局的值直接修改全局），只能通过mutation变更数据（拿到全局的值在当前页面修改）
• 不可以处理异步任务

使用mutation的第一种方式

store中
const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0},
	mutations:{
		add(state){
		//变更状态
			state.count++	
		}
	}
})

组件中
methods:{
	handleadd(){
	//触发store中mutations的第一种方式
		this.$store.commit('add')	
	}
}

mutation如何传递参数

store中
const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0},
	mutations:{
		add(state,step){
		//变更状态
			state.count+=step
		}
	}
})

组件中
methods:{
	handleadd(){
	//触发mutaions函数并携带参数
		this.$store.commit('add',2)	
	}
}

使用mutation的第二种方式（辅助函数方式）

store中
const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0},
	mutations:{
		add(state,step){
		//变更状态
			state.count+=step
		}
	}
})

组件中
button @click="add(5)"
//从vuex中按需导入mapMutations函数
import {mapMutations} form "vuex"

methods:{
	...mapMutations(['add',2])
}

3、Action函数

用于处理异步任务，不能直接操作state的数据，只能通过mutation中的commit来操作

action第一种方式

store中
const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0},
	mutations:{
	//step形参
		add(state,step){
		//变更状态
			state.count+=step
		}
	},
	actions:{
		addAsync(context,step){
			setTimeout(()=>{
			//携带参数
				content.commit('add',step)
			},1000)	
		}	
	}
})

组件中
mtthods:{
	//使用dispatch触发action
	//action触发事件的第一种方式
	handleadd(){
		this.$store.dispatch('addAsync',5)
	}
}

action第二种方式（辅助函数方式）

store中
const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0},
	mutations:{
	//step形参
		add(state,step){
		//变更状态
			state.count+=step
		}
	},
	actions:{
		addAsync(context,step){
			setTimeout(()=>{
			//携带参数
				content.commit('add',step)
			},1000)	
		}	
	}
})

button @click="add(5)"
组件中
//从vuex中按需导入mapActions函数
import {mapActions} form "vuex"

methods:{
	...mapActions([’add‘])
	//可以直接将add作为按钮的事件
}

4、Getter

用于对store中的数据加工处理形成新的数据（不会修改元数据，但是元数据改变getter也会跟着改变）

//定义getter
const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0},
	getters:{
		showNum(state){
			return '当前最新的数量是【'+state.count+'】'
		}
	}
})

组件内第一种
{{$store.getters.名称}}
this.$store.getters.名称

第二种（辅助函数方式）
{{showNum}}
import {mapGetters} from 'vuex'
computed:{
	...mapGetters(['showNum'])
}

三、安装Vuex及基本使用

安装命令

npm install vuex --save

导入vuex

import Vuex form "vuex"
Vue.use(Vuex)

创建Store对象

const store = new Vuex.store({
	//state中存放的就是全局的数据
	state:{count:0}
})

将store对象挂载到vue实例上

new vue({
    el:'#app',
    render:h=>h(app),
    router,
    store
})
//将创建的共享数据对象，挂载到Vue实例中
//所有的组件，就可以直接从store中获取全局数据

四、安装vuex数据持久化插件

yarn add vuex-persistedstate

store中jindex.js文件

import Vue from "vue";
import Vuex from "vuex";
import  persist  from 'vuex-persistedstate'
import count from "../moudles/count"//modules代码
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    },
  mutations: {
  },
  actions: {},
  modules: {count},
  plugins: [
     persist({
      key:'count',//默认存到localstorage中的键名
      paths: ['count']//引入的js模块  ['count','del']
    }),
  ],
});

count.js文件

export default ({
  namespaced: true,
  state: {
    count:0
    },
  mutations: {
    handleAdd(state,step){
      state.count+=step
    }
  },
  actions: {},
  modules: {},
});

Home.vue文件

<template>
  <div class="home">
    {{ count.count }}
    <button @click="handleAdd(2)">点我</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState, mapMutations } from "vuex";
export default {
  name: "Home",
  data() {
    return {};
  },
  components: {},
  computed: {
    ...mapState(["count"]),
  },
  mounted() {},
  methods: {
    ...mapMutations("count", ["handleAdd", 2]),
  },
};
</script>