VUEX介绍

Vue特点

• 集中式存储管理应用的所有组件的状态
• 保证状态以一种可预测的方式发生变化
• 简化Vue组件间通讯

Vuex的安装与使用

在vue之后引入vuex会自动安装

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

npm安装

npm i vuex@3.4.0 --save

安装 Vuex 之后，让我们来创建一个 store

 import Vuex from 'vuex'
 vue.use(Vuex)
 const store = new Vuex.Store({
 	state: {
 		count: 0
 	},
 	 mutations: {
 	 	 increment (state) {
 	 	 	state.count++
 	 	 }
 })

Vuex 的核心概念

State

获取状态对象

Mutations

更改 Vuex 的 store 中的状态

mutations: {
	PLUS (state) {
		state.count++     // 变更状态
	}
}

Actions

提供给外部组件调用，actions内使用commit触发执行mutations中的方法

Getters

Getter 接受 state 作为其第一个参数

getters: {
	doneTodos: state => {
		return state.todos.filter(todo => todo.done)
	}
}

Vuex辅助函数 map系列

在组件中使用

import {mapGetters,mapActions} from 'vuex'

mapGetters 辅助函数
---- mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

//在组件中获取 state 数据，在 computed 计算属性中使用，如果你想将一个 getter 属                  性另取一个名字，使用对象形式
...mapGetters[{
	doneCount: 'doneTodosCount'
	//doneCount ：计算名
	//doneTodosCount：方法名
}]
//当计算名和方法名相同时可以简写
//...mapGetters['doneTodosCount']

mapActions 辅助函数
---- 在数组中操作 vuexStore 中的 action 方法

methods:{
	...mapActions[{
		onPlus: 'onPlus'   //'onPlus'：actions方法名
	}]
	 // 名称与值相同时可简写为 'onPlus'
}
//等价于
onPlus(){
	 this.$store.dispatch("onPlus")
}

Vuex - persistedstate 插件

安装

npm i vuex-persistedstate --save

引入及配置
在store下的index.js文件中配置：

 import createPersistedState from 'vuex-persistedstate'
 plugins: [createPersistedState]

默认存储到 localStorage 中，想要存储到 sessionStorage 中，配置如下：

plugins: [createPersistedState({
	storage:Window.seessionStorage,
	key:'store'
})]