Vuex核心知识点总结【上篇】

风不识途
788 阅读6分钟

Vuex目录

认识Vuex

1.Vuex是做什么的?

❝

Vuex 是实现「组件全局状态」(数据) 管理的一种机制，可以「方便的实现组件之间数据的共享」，并且数据是响应式的，所以「数据变化视图也会更新」

❞
官方解释
  • 官方解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
  • 它采用集中式存储管理应用的所有组件状态,并以相应规则保证一种可预测的方式发 生变化
  • 实现非父子组件甚至不同组件之间的高效通信
状态管理到底是什么?
  • 状态管理模式、集中式存储管理, 其实可以理解成多个组件共享的变量, 全部存储在一个公共对象里面
  • 将这个对象放在顶层的Vue实例中, 让其他组件可以使用, 那么多个组件就可以共享这个对象中的所有变量属性

2.管理什么状态呢?

  • 什么状态需要我们在多个组件间共享?
    • 如果你做过大型应用, 你一定遇到过多个状态, 在多个界面间的共享问题。
    • 比如用户的登录状态、用户名称、头像、地理位置等等
    • 这些状态信息, 我们都可以放在「统一的地方」, 「对它进行保存和管理」, 而且它们还是「响应式的」
  • 只有「组件之间共享的数据」, 才有必要存储到 vuex 中
  • 对于组件中的私有数据, 依旧存储在组件自身的 data 中即可
  • 我们先来看看单界面的状态管理吧👇

3.单界面的状态管理

  • 图中关键字解释
    • State: 应用的数据源, 就是我们的状态
    • View: 视图层, 可以针对 State 的变化, 显示不同的信息
    • Actions: 在 Views 上用户的各种行为操作: 点击、输入, 会导致状态的改变

4.界面状态管理的实现

  • 下面是一个简单的计数功能, 但情况变了, 现在有两个组件 A 和 B, 还有以下两个要求：
    • 要求它们都能对 count 进行操控 counter
    • 要求 A 修改了 count 后, B 要第一时间知道, B 修改后, A 也要第一时间知道
    • 这很容易的想到, 将数据源 count 抽取出来, 用一个全局变量的模式来进行管理, 这样任何组件中都可以很容易的获取这个状态了

5.多组件共享状态的问题

  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要变更同一状态
  • 以前的解决办法
    • 将数据以及操作数据的行为都定义在父组件
    • 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)
  • vuex就是用来解决这个问题的

5.多界面状态管理

  • 全局单例模式
  • 将组件间共享的状态抽取出来, 交给 Vuex 大管家, 统一进行管理
  • 每个视图遵守「规定好的规则」, 比如修改数据源 state、触发 actions 等等, 都需要「遵循它的规则」, 以此来达到让项目结构更加清晰且易于维护的目的
  • 这就是Vuex背后的基本思想

6.Vuex状态管理图示

  • 解释图中关键字
  • State
    • 公共数据源，所有共享的数据都要统一放到Store中的State中存储
  • Mutations
    • Mutation用于修改变更state中的数据
  • Actions
    • 在 Mutation 中不能编写异步代码, 会导致vue调试器的显示出错
    • ( 在vuex中我们可以使用Actions来执行异步操作 )


Vuex 基本使用

1.Vuex使用步骤

  1. 安装vuex依赖包
  2. 导入vuex 包
  3. 创建store对象
  4. 将 store 对象挂载到 vue 实例中
//1.npm安装vuex依赖包 
 `npm install vuex --save`
//2.导入 vuex 包
 import Vuex from 'vuex'  
 Vue.use(Vuex)
  //3.创建store对象
    const store = new Vuex.Store({
        // state 中存放的就是全局共享的数据
        state: { count: 0 }
    })
//4.将 store 对象挂载到 vue 实例中
    new Vue({
   render: h => h(App),
   store
 }).$mount('#app')

2.计数器案例

  • 将之前的计数案例重写, 使用Vuex

准备工作

  1. 构建项目: vue crearte projectName
  2. 在当前项目 store文件夹 中 index.js文件中编写
// 1.引入Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2.安装插件
Vue.use(Vuex)

// 3.创建对象
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  // 通过mutations来改变store中state
  mutations: {
    // 方法
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
})

export default store

挂载到Vue实例中

  • 来到main.js文件，导入store对象，并且放在new Vue中
  • 这样, 其他Vue组件中就可以通过this.$store的方式, 获取到这个store对象了
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

使用Vuex的count

<template>
  <div id="app">
    <h2>APP组件</h2>
    <div>APP组件当前计数: {{$store.state.counter}}</div>
    <button @click="add">+</button> 
    <button @click="sub">-</button>
</template>

<script>
export default {
  name: 'App',
  methods: {
    add() {
      // commit提交更改公共state状态
      this.$store.commit('increment')
    },
    sub() {
      this.$store.commit('decrement')
    }
  }
}
</script>

流程小结

  1. 用户访问页面并触发 actions
  2. actions 提交 mutations 事件
  3. mutations 事件更改 state 状态
  4. state 状态改变后更新页面(vue comptents)

3.Vuex 重点属性及注意事项

  • 重点属性:
    • 通过this.$store.state属性的方式来访问 store 状态
    • 通过this.$store.commit('mutation中方法')来修改 state
  • 注意事项:
    • 我们提交通过mutations方式来修改state中的数据, 而非直接改变$store.state.count
    • 这是因为Vuex可更改明确的追踪状态的改变, 所以「不要直接改变」$store.state.count的值


Vuex 核心概念

1.Vuex 核心概念

  • State: 单一状态树, 每个应用仅仅包含一个store实例, 存放需要公共管理的状态
  • Getters: 对 State 状态进行过滤、筛选操作
  • Mutation: 更改 Vuex 的 store 中的状态的「唯一」方法是提交 mutation
  • Actions: Action 提交的是 mutation，而不是直接变更状态，可以包含任意异步操作
  • Module: Vuex 允许我们将 store 分隔成「模块 (module)」, 每个模块拥有自己的 state、mutation、action、getter
❝

我也不想分两篇发出来, 掘金的文章字数有限制了🤔 点击阅读下篇

❞
avatar
文章
阅读
粉丝