一篇文章带你吃透Vuex3的状态管理

什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理各组件共享的一些状态，使得状态管理变得简单而且容易理解。它的主要作用是用于管理Vue.js应用中的各种状态。

Vuex的结构

Vuex包含5个部分：

• State：用于存储状态变量
• Mutation：用于改变state中的值
• Action：定义方法来分发Mutation
• Getter：从state中派生出一些值
• Module：为了解决Vuex模块化问题

安装Vuex

可以通过npm包管理器安装Vuex，也可以从CDN获取。

npm install vuex --save

使用Vuex

安装完Vuex之后，需要通过Vue.use()来启用Vuex。

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

Vue.use(Vuex)

正确的启用Vuex后，我们可以在Vue.js的组件中使用store对象对共享的数据进行操作。

<script>
export default {
  computed: {
    counter () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}
</script>

State

State是唯一的共享数据中心，它用于存放数据。我们在组件中也可以访问state中的数据，并且我们可以在Mutation中修改state中的数据。

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

我们可以通过以下语句来访问state中的数据。

this.$store.state.count

Mutation

Mutation用于修改state中的数据。Mutation必须是同步函数，并且它只能在store中被调用，而且调用也只能是commit方法。Mutation接收每个调用的参数就是当前state。

我们可以通过以下语句来调用Mutation。

this.$store.commit('increment')

Action

Action用于提交Mutation，异步的程序会在这里执行。Action可以用于提交一个或多个Mutation，并且会被commit方法触发。

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

我们可以通过以下语句来提交Action。

this.$store.dispatch('incrementAsync')

Getter

Getter可以返回计算后的属性，并且可以监控属性的变化。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  getters: {
    doubleCount: state => {
      return state.count * 2
    }
  }
})

我们可以通过以下语句来访问getter中的属性。

this.$store.getters.doubleCount

Module

Module可以帮助我们更好地组织代码，使得代码更易于维护。Module允许我们将store分解成多个模块，每个模块都有自己的state、mutation、action和getter。

const store = new Vuex.Store({
  modules: {
    moduleA: {
      state: {},
      mutations: {},
      actions: {},
      getters: {}
    },
    moduleB: {
      state: {},
      mutations: {},
      actions: {},
      getters: {}
    }
  }
})

示例说明

示例1：计数器

这个示例用一个计数器来说明Vuex的使用方法。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

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

示例2：TodoList

这个示例用一个TodoList来说明Vuex的使用方法。

<template>
  <div>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo">
      <button type="submit">Add Todo</button>
    </form>

    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="deleteTodo(index)">x</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newTodo: ''
    }
  },
  computed: {
    todos () {
      return this.$store.state.todos
    }
  },
  methods: {
    addTodo () {
      this.$store.commit('addTodo', this.newTodo)
    },
    deleteTodo (index) {
      this.$store.commit('deleteTodo', index)
    }
  }
}
</script>

const store = new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo (state, todo) {
      state.todos.push(todo)
    },
    deleteTodo (state, index) {
      state.todos.splice(index, 1)
    }
  }
})

以上就是关于Vuex的详细讲解和两个示例。希望能对大家有所帮助。