Web前端开发之VUE17——Vuex

目录

Vuex是什么：

初始化功能：

定义state:

映射state方法：

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++
    }
  },
})

 Mutation：

payload载荷（给mutation传参） ：

 常量代替mutation方法名：

 此方法一般用于多人项目合作。

mutation函数同步性：

 实质上任何在回调函数中进行的状态的改变都是不可追踪的。

Aciton:

action的使用https://vuex.vuejs.org/zh/guide/actions.html

dispatch分发：

因为action方法的异步性及mutation方法的同步性，所以我们使用dispatch方法来调用异步元action方法。

 同样的action和mutation也有自己的map方法：

 mutation类似，详见官方文档。

module模块化：

module的命名空间：

 加上namespace：true后，getter和mutation和action不再是全局挂载，而是模块内私有。

封闭后可以使用下面的调用方法调用：

 第三种方法：

createNamespacedHelpers方法：