Vuex概述及核心概念

Posted 2023-02-16 遥岑.

目录

• Vuex
• • 概述
  • 基本使用
  • 核心概念
  • • State
    • Mutation
    • Action
    • Getter
    • 例子

Vuex

概述

Vuex是实现组件全局状态（数据）管理的一种机制，可以实现组件之间数据的共享。

优点：

• vuex集中管理共享的数据，易于开发和后期维护
• 能够高效实现组件之间的数据共享，提高开发效率
• 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

基本使用

• 安装vuex依赖包

npm install vuex --save

• 导入vuex包

import Vuex from vuex
Vue.use(Vuex) 

• 创建store对象

const store = new Vuex.Store(
    // state中存放的就是全局共享的数据
    state:  count:0 
)

• 将store对象挂载到vue实例中

new Vue(
   el: '#app',
   render: h => h(app),
   router,
   //将创建的共享数据对象，挂载到vue实例中
   //所有的组件就可以直接从store中获取全局的数据了
   store
)

核心概念

Vuex的主要核心概念：

State

State提供唯一的公共数据源，所有共享的数据要统一放到Store的State中进行存储。

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

组件访问State中数据的方式：

this.$store.state.全局数据名称

//从vuex中按需导入mapState函数
import mapState from 'vuex'
//将全局数据映射为当前组件的计算属性
computed: 
  ...mapState(['count'])

Mutation

Mutation用于变更Store中的数据。
只能通过mutation变更store数据，不可以直接操作store中的数据；通过这种方式虽然操作稍微繁琐一些，但是可以集中监控所有数据的变化。
Mutation 不能执行异步操作。

//定义Mutation
const store = new Vuex.Store(
  state: 
    count: 0
  ,
  mutations: 
    add(state, step) 
      //变更状态 接收参数
      state.count += step
    
  
)

// 触发mutation时携带参数
methods: 
  handle1() 
    this.$store.commit('add',3)
  

// 触发mutations的第一种方式
this.$store.commit()

// 第二种方式
// 按需导入 mapMutations 函数
import  mapMutations  from 'vuex'
//将指定的 mutations 函数，映射为当前组件的 methods 方法
methods: 
   ...mapMutations(['add','addN'])

Action

Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，在Action中通过触发Mutation的方式间接变更数据。

// 定义 action
actions: 
   addNAsync(context, step) 
      setTimeout(() => 
         context.commit('addN', step)
      ,1000)
   

// 触发 action 并携带参数 第一种方式
// 调用 dispatch 函数
this.$store.dispatch('addNAsync', 5)

// 第二种触发 action 的方式
// 导入 mapActions 函数
import mapActions from 'vuex'
//将指定的 actions 函数，映射为当前组件的 methods 函数
methods: 
  ...mapActions(['addAsync','addNAsync'])

Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。
Getter 可以对Store中已有的数据加工处理后形成新的数据，类似Vue的计算属性；Store中数据发生变化，Getter的数据也会跟着变化。

// 使用getters的第一种方式
this.$store.getters.名称

// 使用getters的第二种方式
import mapGetters from 'vuex'
computed: 
   ...mapGetters(['showNum'])

例子

App.vue

<template>
  <div>
    <my-add></my-add>
    <my-sub></my-sub>
  </div>
</template>

<script>
import add from "./components/add.vue"
import sub from "./components/sub.vue"

  export default 
    data() 
      return 
    ,
    components: 
      'my-add': add,
      'my-sub': sub
    
  
</script>

main.js

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
  el: '#app',
  store,
  components:  App ,
  template: '<App/>'
)

store.js

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

Vue.use(Vuex)

export default new Vuex.Store(
    state: 
        count: 0
    ,
    // 只有 mutations 中定义的函数，才有权力修改 state 中的数据
    mutations: 
        // 不要在mutations函数中执行异步操作
        add(state) 
            state.count++
        ,
        addN(state,step) 
            state.count += step
        ,
        sub(state) 
            state.count--
        ,
        subN(state,step) 
            state.count -= step
        
    ,
    actions: 
        // context相当于new出来的实例对象
        addAsync(context) 
            setTimeout(()=> 
                // 在 action 中，不能直接修改 state 中的数据
                // 必须通过 context.commit() 触发某个 mutation 才行
                context.commit('add')
            ,1000)
        ,
        addNAsync(context, step) 
            setTimeout(()=> 
                context.commit('addN',step)
            ,1000)
        ,
        subAsync(context) 
            setTimeout(()=> 
                context.commit('sub')
            ,1000)
        ,
        subNAsync(context,step) 
            setTimeout(()=> 
                context.commit('subN',step)
            ,1000)
        
    ,
    getters: 
        showNum(state) 
            return '当前最新的数量是【'+ state.count +'】'
        
    
)

add.vue

<template>
    <div>
        <!-- template中this可以省略 -->
        <!-- <h3>count: $store.state.count</h3> -->
        <h3>$store.getters.showNum</h3>
        <button @click="btnHandler1">+1</button>
        <button @click="btnHandler2">+n</button>
        <button @click="btnHandler3">+1 async</button>
        <button @click="btnHandler4">+N async</button>
    </div>
</template>

<script>
export default 
   data() 
    return 
   ,
   methods: 
    btnHandler1() 
        this.$store.commit('add')
    ,
    btnHandler2() 
        // commit 调用某个 mutation 函数
        this.$store.commit('addN',3)
    ,
    btnHandler3() 
        // dispatch函数专门触发action
        this.$store.dispatch('addAsync')
    ,
    btnHandler4() 
        this.$store.dispatch('addNAsync', 5)
    
   

</script>

sub.vue

<template>
    <div>
        <!-- <h3>count: count</h3> -->
        <h3>showNum</h3>
        <button @click="btnHandler1">-1</button>
        <button @click="btnHandler2">-n</button>
        <button @click="subAsync">-1 async</button>
        <button @click="subNAsync(5)">-n async</button>
    </div>
</template>

<script>
import mapState, mapMutations, mapActions, mapGetters from 'vuex'

export default 
   data() 
    return 
   ,
   computed: 
    // 将全局数据映射为计算属性
    ...mapState(['count']),
    ...mapGetters(['showNum'])
   ,
   methods: 
    ...mapMutations(['sub','subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    btnHandler1() 
        this.sub()
    ,
    btnHandler2() 
        this.subN(2)
    ,
   

</script>

效果：