前端更文第3天

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它可以帮助我们管理应用程序中的共享状态，并使得组件之间的通信更加简单和直接。

如果你想在组件中使用 Vuex，你需要在 Vue 应用程序的入口文件中创建一个 store，然后在每个需要使用 Vuex 状态的组件中引入并使用它。具体步骤如下：

1.在node_module中安装依赖

npm install vuex --save

2.导入全局使用

import Vuex from 'vuex'
Vue.use(Vuex)

3.向外暴露属性

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state = {}
const mutations = {}
const action = {}
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment')
    }
  }
})

export default store
export default new Vuex.Stroe({
	state, 
	mutations,
	action
})

4.在main.js中对store实现挂载

<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { computed: mapState(['count']), methods: mapActions(['increment']) } </script>

在上面的代码中，我们使用 mapState 和 mapActions 辅助函数将 count 状态映射到 computed 计算属性中，将 increment action 映射到 methods 方法中。这使得我们可以在组件中通过 this.count 和 this.increment() 来访问 Vuex 状态和操作。

注意，在组件中使用 Vuex 状态和操作时，我们不应该直接修改状态，而是应该通过调用 mutation 来修改状态。这是因为 Vuex 需要跟踪状态的变化，以便在状态变化时自动更新组件。因此，我们应该尽可能地使用 mutation 来修改状态。 Vuex的Vue.js状态管理工具，它采用集中式存储管理所有的组件状态，可以实现不同组件之间数据的共享。

核心状态

核心模块指的是 Vuex 中的重要组成部分，包括状态变化 (state mutations)、操作 (actions)、模块 (module) 和获取器 (getters)。

状态变化-State mutations : 状态变化是指修改 state 对象中的数据的操作。是同步的，只能通过 mutations 中的方法来进行修改。
操作-Actions : 操作用于处理异步任务，比如从后端服务器获取数据。Actions 可以包含多个 mutations 方法，并且可以通过 dispatch 方法来触发。
模块-Modules : 模块可以将 Vuex store 分割成更小的模块，从而使代码更加清晰和可维护。每个模块都有自己的 state、mutations、actions 和 getters。
获取器-Getters : 获取器用于从 store 中获取数据。可以对 state 中的数据进行计算和筛选，并且可以缓存计算结果以提高性能。

vueX状态管理