vuex概念，vuex的基本操作，持久化工具使用， 辅助函数（语法糖）

1.Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，它是由五部分组成，分别是: state,actions,mutaions,getters,modules

1. state 存放数据
2. mutaions 唯一可以修改state的地方
3. getters 相当与vue的计算属性，可以对state里的数据做进一步的处理
4. actions 异步操作
5. modules store的子模块 用于大型项目 方便管理使用的

2.如何使用

this.$store.state.user         使用state里的user数据
this.$store.commit.('del',要传递的值)         使用mutations里的方法
this.$store.dispatch.('gethome',要传递的值)   使用actions里的方法他是异步的也可以更改state的数据但不建议使用

vuex中的高级用法

持久化工具

安装依赖

cnpm i vuex-persistedstate --save

使用

在store/index.js中
// 引入
import persist from 'vuex-persistedstate'
// 使用 跟state,mutations同级
plugins:[persist()]

高级用法----- 辅助函数（语法糖）

1. 有那几个辅助函数(4大金刚)
   mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
   3…如何使用

home.vue

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

<script>
映射vuex里面的实例
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
使用modules时使用模块的实例的方法
import {createNamespacedHelpers} from 'vuex'
映射user的实例
const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')
映射cart的实例
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>