vuex，你可以理解为一个存放全局变量的仓库。在这里可以存放一些各个模块中通用的变量和属性。

什么样的数据适合存储到 Vuex 中

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

Vuex中的主要核心概念

触发 mutations 时传递参数：

// store.js mutations: { addN(state, step) { //第一个参数是state，后面的参数是 store.commit 传入的额外参数，即 mutation 的载荷 payload state.count += step } }

// 组件中 this.$store.commit('addN', 3) // 调用commit函数，触发mutations时携带参数

触发 mutations 的第二种方式：

从 vuex 中按需导入 mapMutations 函数 import { mapMutations } from 'vuex'
通过刚导入的 mapMutations 函数，将指定的 mutations 函数，映射为当前组件的 methods 函数 methods: { ...mapMutations(['add', 'addN']) }

4. Getter

Getter用于对Store中的数据进行加工处理形成新的数据。Getter不会修改Store中的原数据，只起到一个包装器的作用。

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性 computed和计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。即 Store 中数据发生变化，Getter 的数据也会跟着变化

Vuex持久化插件-解决刷新数据消失的问题

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

1.手动利用HTML5的本地存储

方法

vuex的state在localStorage或sessionStorage或其它存储方式中取值
在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。

这样state就会和存储一起存在并且与vuex同步

问题

最直观的就是，手动写比较麻烦。

2.利用vuex-persistedstate插件

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

使用方法

安装

npm install vuex-persistedstate  --save

引入及配置

在store下的index.js中
默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

vue如何监听vuex里面的属性

watch实现监听Vuex状态监听(利用computed)

`Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到`

computed: {
    f1() {
        return this.$store.state.xxxx
  }
},
watch: {
    f1(curVal, oldVal) {
          //这里的curVal就是需要监听的值
    }
 }

`computed 里一般写个函数，这个函数里一定是return一个结果。这里你可以直接用f1作为本组件监听$store.state.xxxx, 也可以在本组件里声明一个变量然后再通过watch监听，将watch中的curVal赋值给该变量从而达到使用的目的。`

当需要从vuex中获取的变量特别多是,可以使用mapState代替

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

// 在单独构建的版本中辅助函数为 Vuex.mapState

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象展开运算符
mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符（现处于 ECMAScript 提案 stage-4 阶段），我们可以极大地简化写法：

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

vuex回顾