【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: '仓库大标题'
  }
})