笔记大全

如何安装vue状态管理Vuex

更新时间：2023-11-08

什么是Vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

安装Vuex

要使用 Vuex，首先需要安装和引入它：

    // 使用npm安装
    npm install vuex --save
    // 或使用yarn安装
    yarn add vuex

然后再项目中引入Vuex：

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

    Vue.use(Vuex)

Vuex的核心概念

Vuex 是为了解决共享状态在多个组件之间的共享和管理而诞生的。因此，我们需要了解一些和 Vuex 相关的核心概念。

1. state

在 Vuex 中，state 是用于存储数据的仓库。所有共享的数据都定义在这里，各个组件就可以直接访问或修改 state 中的数据。

    const store = new Vuex.Store({
      state: {
        count: 0
      }
    })

    // 在组件中访问 state
    export default {
      computed: {
        count() {
          return this.$store.state.count
        }
      }
    }

2. getters

getters 可以理解为 state 的计算属性，对 state 中的数据进行计算，并且在组件中也能像 state 一样被访问。

    const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: 'todo1', done: true },
          { id: 2, text: 'todo2', done: false },
          { id: 3, text: 'todo3', done: true }
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        },
        doneTodosCount: (state, getters) => {
          return getters.doneTodos.length
        }
      }
    })

    // 在组件中访问 getters
    export default {
      computed: {
        doneTodos() {
          return this.$store.getters.doneTodos
        },
        doneTodosCount() {
          return this.$store.getters.doneTodosCount
        }
      }
    }

3. mutations

mutations 是用来修改 state 中数据的方法，只能进行同步操作（原子操作），也就是说只有通过 mutations 才能修改 state。

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++
        },
        decrement(state) {
          state.count--
        }
      }
    })

    // 在组件中提交 mutations
    export default {
      methods: {
        increment() {
          this.$store.commit('increment')
        },
        decrement() {
          this.$store.commit('decrement')
        }
      }
    }

4. actions

actions 和 mutations 类似，但是它可以进行异步操作（多个同步操作的组合）。而且 actions 中可以包含任意异步操作代码。

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++
        }
      },
      actions: {
        incrementAsync(context) {
          setTimeout(() => {
            context.commit('increment')
          }, 1000)
        }
      }
    })

    // 在组件中分发 actions
    export default {
      methods: {
        incrementAsync() {
          this.$store.dispatch('incrementAsync')
        }
      }
    }

总结

Vuex 是 Vue.js 的一个状态管理库，用于管理全局状态。通过 store 实例来管理应用的状态，store 里面包含着应用的状态和 mutations，可以修改状态，通过 actions 来提交 mutations。

c语言编程笔录