Vuex

1. vuex 的理解

vuex是vue的状态管理工具，管理项目中的公共数据，能够在所有的组件中使用

一共有五大核心

state 存放公共数据的地方  通过this.$store.state.xxx

mutations 修改state的地方  通过this.$store.commit()

getters 计算 state 的地方  通过this.$store.getters.xxx

actions 发送异步请求的地方  通过this.$store.dispatch()

modules 模块化 把数据分模块管理

2. vuex 的语法糖辅助函数（语法糖就是 少的代码实现多的功能）

mapState

mapMutations

mapActions

mapGetters

先引入 然后展开使用

mapState 和 mapGetters 在计算属性下展开

mapActions 和 mapMutations 在 methods 下展开

展开的时候用扩展运算符...展开

代码片段：

<template>
   <button @click="add">123</button>
</template>

<script>
   import {mapMutations} from "vuex";
   export default {
      data() {
         return {};
      },
      methods: {
           ...mapMutations(["add"])
      }
   }
</script>

3. vuex 的执行机制

如果要修改 state的状态，先在组件中通过this.$store.dispatch 方法来调用一个 actions 再在 actions 里通过 commit 来调用 mutations 里定义的方法来修改 state

4. vuex 的弊端

vuex 的⼀些弊端,⽐如浏览器刷新的时候,vuex 的数据会丢失,我们⼀般结合本地存储来解决,当我们在 mutations ⾥⾯改变 state 的时候可以通过 localStorage（永久存储 ） 或者 sessionStorage（临时存储）来实现本地存储。 也可以通过vuex的持久化插件存储到本地,然后在 state 的状态的属性值那块写⼀个三元表达式,如果本地存在数据的话则读取本地存储的数据,否则就赋值为 null 具体存了本地存储怎么拿来用：

代码片段：

在state中：
// list:JSON.parse(localStorage.getItem("list"))||[],
   list: localStorage.getItem("list")? JSON.parse(localStorage.getItem("list")) : [];

5. 怎么开启严格模式

跟 state 同级的地方 设置 strict:true, 如果开启了严格模式 只能在 mutations 中修改 state 否则就会报错，一般都是在开发环境下使用的

6. modules模块化

当在 vuex 中存储的数据很多的时候 需要用 modules 来分模块管理，首先在store下面新建一个模块的 moduleA.js 文件，里面有四大核心 state、mutations、actions、getters 并且要开启一个命名空间 namespaced:true 然后在index.js 中引入 这个 js ，并在 modules 中注册模块 a:moduleA ，用的时候，可以使用插值表达式 this.$store.state.a.arr 这就是调用模块a下面的methods中arr this.$store.commit("a/add") 这个就是调用模块 a 下面的 add 方法