【Vue】开启严格模式及Vuex的单项数据流

本文主要是介绍【Vue】开启严格模式及Vuex的单项数据流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、引出问题

目标

明确 vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据

这样数据的流向才会更加清晰，将来对数据的修改，都在仓库内部实现的，更易于维护

直接在组件中修改Vuex中state的值

Son1.vue

button @click="handleAdd">值 + 1</button>methods:{handleAdd (n) {// 错误代码(vue默认不会监测，监测需要消耗性能)this.$store.state.count++// console.log(this.$store.state.count) },
}

---

二、开启严格模式

在最终上线的时候是不需要开启严格模式的

通过 strict: true 可以开启严格模式，开启严格模式后，直接修改state中的值会报错

state数据的修改只能通过mutations，并且mutations必须是同步的

// 创建仓库
const store = new Vuex.Store({// 开启严格模式（有利于初学者，检测不规范的代码 => 上线时需要关闭，因为它是会消耗我们性能的）strict: true,// 通过 state 可以提供数据state: {strict: true,count: 100,title: '仓库大标题'}
})

这篇关于【Vue】开启严格模式及Vuex的单项数据流的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---