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 方法