vuex基础用法

你知道什么是Vuex吗？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

vuex能做什么呢？

存储组件公共数据

3.vuex的核心

• state 存储数据

• mutations 存储方法 用来直接操作state中的数据

• actions 存储方法 调用mutations中的方法 里面的方法返回的是promise对象可以实现异步操作

• getters 对state中的数据做逻辑计算 类似于computed

• modules 模块存储

• plugins 插件（持久化存储）

4.vuex的运行原理

 在组件中通过dispatch来调用actions中的方法，早actions中通过commit来调用mutations中的方   法，在mutaions中的方法中可以直接操作state中的数据，只要state中的数据发生改变，就会立即   响应到所有的组件上  

5.

vuex的使用

• 基本使用 在vue的原型上有一个$store对象可以调用vuex的任何东西

  state this.$store.state.**
  
  mutations this.$store.commit("方法名",参数) 参数只能传一个
  
  actions this.$store.dispatch("方法名",参数)
  
  getters this.$store.getters.**
  
  module this.$store.模块名.state

• 使用映射函数

  将vuex的中的成员映射到组件中然后使用

  mapState mapMutations mapGetters mapActions

  步骤：

  • 在组件中导入需要的函数

    import {mapState,mapGetters **} from "vuex"

  • 映射函数在组件中对应位置

    • mapState --computed

    • mapGetters --computed

    • mapMutations--methods

    • mapActions--methods

  • 语法

    computed:{
        ...mapState(['student'])
    }

 6.vuex的持久化

就是将vuex的数据存储在本地（localStorage sessionStorage）

持久化网址：https://www.jianshu.com/p/a4faae6a3184

可以选择手动的去写，但是比较麻烦所以选择 插件

下载：

cnpm install vuex-persistedstate --save

配置：store->index.js

import persistedState from 'vuex-persistedstate'

默认的使用localStorage
plugins: [persistedState()]
还可以配置成sessionStorage
plugins: [persistedState({storage: window.sessionStorage})]

使用Vuex管理数据的好处：

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