本文共 2736 字，大约阅读时间需要 9 分钟。

Vuex入门知识点解析

Vuex 是一个流行的状态管理库，用于在 Vue 应用程序中管理全局状态。以下是关于 Vuex 的一些核心知识点，帮助你快速理解和使用它来优化你的 Vue 应用程序。

知识点1：简单的使用Vuex进行状态取值

Vuex 的核心是通过一个全局状态仓库（Store）来管理应用程序的状态。在 Vuex 中，状态可以通过 store.state 访问。以下是一个简单的示例：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    test: 'ceshi'  }})console.log(store.state.test) // 输出 'ceshi'

知识点2：简单的使用Vuex对状态进行修改值——Mutations

Vuex 提供了 mutations 用于定义状态修改的函数。只有通过 mutations 来修改状态是可靠的，因为它是同步的。以下是一个简单的示例：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    test: 'ceshi'  },  mutations: {    changeName(state) {      state.test = '哈哈 我不是test'    }  }})store.commit('changeName') // 提交一个 mutationconsole.log(store.state.test) // 输出 '哈哈 我不是test'

知识点3：对状态进行动态修改值——传递参数

除了基本的 store.commit('changeName')，你还可以传递参数给 mutation 函数进行动态修改：

mutations: {  changeName(state, zhi) {    state.test = zhi  }}store.commit('changeName', '动态修正值，我不是哈哈')console.log(store.state.test) // 输出 '动态修正值，我不是哈哈'

知识点4：如果 store.commit() 传递的参数不止两个，那该怎么办？

当参数超过两个时，可以通过将参数传递为一个对象来处理：

mutations: {  changeName(state, obj) {    state.test = obj.x  }}store.commit('changeName', { v: '我是vvvvvvvvv', x: '我是xxxxxxxxx' })console.log(store.state.test) // 输出 '我是xxxxxxxxx'

知识点5：提交 Mutations 的另外一种方式

你也可以通过直接传递对象参数来提交 mutation：

mutations: {  changeName(state, obj) {    state.test = obj.val  }}store.commit({  type: 'changeName',  val: 10,  sex: '男',  newName: '王五'})console.log(store.state.test) // 输出 10

知识点6：Action 的基本使用

Vuex 的 Action 用于执行异步操作，并可以提交 mutation。使用 store.dispatch 来调用 action：

actions: {  initDatalist(context, obj) {    console.log(context)    console.log(obj)  }}store.dispatch('initDatalist', { val: '我是哈哈' })

知识点7：Action 模块与 Mutations 模块中的函数不会互相覆盖

Vuex 的 Action 和 Mutations 模块中的函数名可以重复，不会互相覆盖：

import { getGoodsInfo } from '../apis/api'actions: {  async initDatalist(context, obj) {    let res = await getGoodsInfo()    console.log(res.data.data)    context.commit({      type: 'initDatalist',      list: res.data.data    })  }}

知识点8：Getters 的基本使用

Vuex 的 Getters 用于定义计算属性，结果会被缓存，只有当数据发生变化时才会重新计算：

getters: {  getMale() {    return 'getters必须返回一个值'  }}console.log(store.getters.getMale) // 输出 'getters必须返回一个值'

知识点9：Getters 过滤值

通过 Getters 过滤数据，可以实现动态值获取和过滤：

getters: {  getMale(state) {    let arr = []    for (let obj of state.emplist) {      if (obj.sex === '男') {        arr.push(obj)      }    }    return arr  }}console.log(store.getters.getMale) // 输出过滤后的男生数组

知识点10：Filter 的使用（与 Vuex 无关）

Filter 是一个常见的数组操作方法，与 Vuex 无关：

let arr = [1, 2, 3, 4, 5, 6, 7, 8]let newarr = arr.filter(val => {  if (val % 2 === 0) {    return true  } else {    return false  }})console.log(newarr) // 输出 [2, 4, 6, 8]

通过以上知识点，你可以逐步学习并使用 Vuex 来管理 Vue 应用程序的状态，提升开发效率和代码质量。

转载地址：http://klwwk.baihongyu.com/