vuex (概念、组成、map高级语法、数据持久化)

一、概念

Vuex 是一个专门为 Vue.js应用程序开发的状态管理模式。它采用的是集中存储，来管理所有应用组件的状态，vuex也是vue的官方调试工具。在数据量大的时候使用vuex

二、组成

五种状态分别是： state:存储状态、getters:计算属性、mutations:修改状态， actions:异步操作、modules:模块
plugins 是一个插件

 1. state:存储状态

 2. getters:计算属性，获取数据之前再次编译，我们在组件中使用 通过$sotre.getters.fun(方法)

 3. mutations:修改状态 --> this.$store.commit({方法}) 再到vuex中 mutations里写自定义方法名，
	它是同步的，一般在组件中使用 用来存放方法的，它是只要调用这个方法就会调mutations

 4. actions:异步操作 在组件中使用是$store.dispath(")用来执行异步操作的这个和同步的mutations相似

 5. modules：store的子模块 为了开发大型项目，方便状态管理而使用的。

三、map高级语法 （语法糖）

1. 辅助函数（4大金刚）
   mapState、mapActions、mapMutations、mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
3. 如何使用
   在home.vue中

<template>
 <div id="">
   {{ token }}
   {{ token - x }}
 </div>
</template>

<script>
//引入
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

import {createNamespacedHelpers} from 'vuex'

const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')

const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')



export default {
 name: '',
 data() {
   return {}
 },
 computed: {
   ...mapState({
     token: 'token'
   }),
   ...mapGetters(['token-x']),
   ...mapSateUser(['userid']),
   ...mapStateCart({cartid:'userid'})
 },
 //生命周期 - 创建完成（访问当前this实例）
 created() {
   this.setToken('123456')
 },
 //生命周期 - 挂载完成（访问DOM元素）
 mounted() {},
 methods: {
   ...mapActions({
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({
   setId:"setToken"
  })
 }
}
</script>

四、数据持久化

在存储vuex中的状态，刷新页面会丢失数据
为了解决存储在vuex中的状态刷新页面后数据不会丢失，我们才使用数据持久化。

最简单的方法就是用插件vuex-persistedState。

1. 安装
   cnpm install vuex-persistedState -S

备注：
-S 是–save的简写，意为:把插件安装到dependencies（生产环境依赖）中
-D 是–save-dev的简写，意为:把插件安装到devDependencies（开发环境依赖）中

2. 使用

//引入
import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({
	state,
	mutations,
	actions,
	getters,
	plugins:[createPersistedState({
		storage:sessionStorage,
		key:"token"
	})]			//会自动保存创建的状态。刷新之后还在
})

参数

storage:存储方式。（sessionStorage、localStarage）
key:定义本地存储中的key