vue状态管理模式vuex-State

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态时，若 store 中的状态发生变化，那相应的组件也会相应地得到高效更新。
2.不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态的变化。

Store实例

import { createApp } from 'vue'
import { createStore } from 'vue'

// 创建一个新的store实例
const store = createStore({
  state () {
    return {
        count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
const app = createApp({
  el: '#app'
})
// 将store实例作为插件安装
app.use(store)

在vue组件中，可以通过this.$store访问store实例。如下：从组件发起一个变更

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

注：通过提交mutation方式，而非直接改变store.state.count