Web前端开发之VUE17——Vuex

最新推荐文章于 2024-05-05 22:11:34 发布

原创最新推荐文章于 2024-05-05 22:11:34 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #node.js

Web前端开发——Vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Vuex在Vue.js应用中的作用，它作为一个状态管理库，用于统一管理多个组件之间的共享状态。文章通过实例展示了如何初始化Vuex，定义和映射state，以及使用getter方法。此外，还提到了Vue3中的变化，并讨论了mutation的同步性质和action的异步特性。最后，介绍了Vuex的模块化以及命名空间的使用，帮助开发者更好地组织和管理大型Vue项目的状态。

Vuex是什么：

为了便于我们对多个组件复杂多样的数据分享和处理进行统一控制，vue推出vuex作为多组件统一控制的工具。

初始化功能：

定义state:

映射state：

vue3中的一些改变

getter方法：

通过上面的方法我们需要写自定义的computed方法，但是vuex帮我们继承了一个getter方法以便内含computed方法。

首先getter方法类似于计算属性，很多情况下就是一种内置的计算属性。

首先我们要在store容器中，定义我们的getter。

示例代码：

//app.vue
<template>
  <button @click="$store.commit('changeCount')">click+1</button>
  <button @click="$store.state.count--">click-1</button>
  原始值：{{count}}
  getter计算值：{{getCountPlus}}
  mapgetter获取选中数组：{{getSelectedTableBar[0]}}
  获取id为1的数组项目：{{$store.getters.getTableBarById(3)}}
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  computed:{
    ...mapState(['count']),
    ...mapGetters(['getCountPlus','getSelectedTableBar','getTableBarById'])
  }
}
</script>

//store容器
const store = createStore({
  state: {
    //存储状态
    count: 12,
    tableBar:[
      {id:1,text:'...',isSelected:true},
      {id:2,text:'...',isSelected:false},
      {id:3,text:'...',isSelected:true},
      {id:4,text:'...',isSelected:false},
    ]
  },
  getters:{
    getCountPlus(state){
      return state.count+2
    },
    getSelectedTableBar:(state)=>{
      return state.tableBar.filter(e=>e.isSelected===true)
    },
    getTableBarById:(state)=>(id)=>{
      return state.tableBar.find(e=>e.id===id)
    }
  },
  mutations: {
    changeCount(state) {
      state.count++
    }
  },
})