Vue | Vue.js 全家桶 Vuex状态管理

JavaScript
computed:{
            // 这样写还是需要写三遍
            // name(){
            //     return this.$store.state.name
            // }

            // 返回的是一个一个的函数
            // 名称冲突按数组方式映射过来可能会导致名字冲突
            ...mapState(["name","level","avatarURL"]),
            // 我们可以传入一个对象自己来定义名字
            ...mapState({
                sName:state => state.name,
                sLevel:state => state.level
            })
        }

在setup中使用mapState

在setup中如果我们单个获取装是非常简单的:

通过useStore拿到store后去获取某个状态即可;

但是如果我们需要使用mapState的功能呢?

默认情况下,Vuex并没有提供非常方便的使用mapState的方式,我们进行了一个函数的封装

(封装了一个函数)

不使用封装函数的方法:

JavaScript
// 2 直接对store.state进行解构
    const store = useStore()
    // 这里不是响应式的
    // const { name,level } = store.state
    // 可以使用 toRefs来保证他是一个响应式
    const { name,level } = toRefs(store.state)

    // 修改level 测试
    function changeLevel(){
        // 这里违背了逻辑的不推荐这样写
        // 正规写法为 store.commit("increment")
        store.state.level++
    }

四、核心概念Getters

getters的基本使用

某些属性可能需要经过变化后来使用,这个时候可以使用getters:

JavaScript
const store = createStore({
    // state(){
    //     return {
    //         counter:0
    //     }
    // }
    state:()=>({
        counter:100,
        name:"xiong",
        level:99,
        avatarURL:"http://xxxx",
        users:[
            { id:1,name:"xiong",age:18 },
            { id:2,name:"kobe",age:30 },
            { id:3,name:"james",age:25 }
        ]
    }),
    getters:{
        doubleCounter(state){
            return state.counter*2
        },
        // 需求, 求users里面所有用户的age和 ,年龄和 reduce累加
        totalAge(state){
            return state.users.reduce((preValue,item)=>{
                return preValue + item.age
            },0)
        },
        // 这里有第二值就是 getters
        msg(state,getters){
            // 在getters属性中,获取其他的getters
            return `name:${state.name} level:${state.level} usersTotalAge:${getters.totalAge}`
        }
    },

getters第二个参数

getters可以接收第二个参数

JavaScript
getters:{
        doubleCounter(state){
            return state.counter*2
        },
        // 需求, 求users里面所有用户的age和 ,年龄和 reduce累加
        totalAge(state){
            return state.users.reduce((preValue,item)=>{
                return preValue + item.age
            },0)
        },
        // 这里有第二值就是 getters
        msg(state,getters){
            // 在getters属性中,获取其他的getters
            return `name:${state.name} level:${state.level} usersTotalAge:${getters.totalAge}`
        }
    },

getters的返回函数

getters中的函数本身,可以返回一个函数,那么在使用的地方相当于可以调用这个函数:

JavaScript
getters:{
    // 获取信息
    getusersById(state){
        return function(id){
            const user = state.users.find(item => item.id === id)
            return user
        }
    }
},

==========================
<h2>id-2的朋友信息: {{ $store.getters.getusersById(2) }}</h2>

mapGetters的辅助函数

这里我们也可以使用mapGetters的辅助函数

JavaScript
computed:{
...mapGetters(["doubleCounter","totalAge","getusersById"]),
}

在setup中使用

JavaScript
<script setup>
import { computed,toRefs } from 'vue';
import { mapGetters,useStore } from 'vuex'

  const store = useStore()

  // mapGetters(["msg"]) => 返回的是一个对象
  // 这样做还是有点麻烦
  const { msg:msgFn } = mapGetters(["msg"])
  const msg = computed(msgFn.bind({ $store: store }))

  // 最终做法:
  // const { msg } = toRefs(store.getters)
  // 3 针对某一个getters属性使用computed
  // const msg = computed(()=> store.getters.msg)

</script>

五、核心概念Mutations

Mutation基本使用

更改Vuex的store中的状态的唯一方式就是提交muattion:

JavaScript
mutations:{
    increment(state){
        state.counter++
    },
    decrement(state){
        state.counter--
    }
}

Mutation携带数据

很多时候我们在提交mutation的时候,会携带一些数据,这个时候我们可以使用参数:

JavaScript
mutations:{
    // 普通的值 payload
    changeName(state,payload){
        state.name = payload
    },
    // payload为对象类型
    changeInfo(state,payload){
        state.level = payload.level
        state.name = payload.name
    }
}
=====================================
changeInfo(){
    this.$store.commit("changeInfo",{
      name:"xxwn",
      level:999
     })
  }

对象风格的提交方式

JavaScript
$store.commit({
type:"addNumber",
count:100
})

Mutation常量类型

定义常量:mutation-type.js

JavaScript
export const ADD_NUMBER = "ADD_NUMBER"

定义mutation

JavaScript
[ADD_NUMBER](state,payload){
state.counter += payload.count
}

提交mutation

JavaScript
$store.commit({
type: ADD_NUMBER,
count: 100
})

mapMutations辅助函数

我们也可以借助于辅助函数,帮助我们快速映射到对应的方法中:

在setup中使用也是一样的

mutation重要原则

mutation必须是同步函数

因为devtool工具会记录mutation的日记

每一条 mutation被记录,devtool都需要捕捉到前一状态和后一状态的快照;

但是在 mutation中执行异步操作,就无法追踪到数据的变化

六、核心概念Actions

actions的基本使用

Action类似于mutation,不同在于:

Action提交的是mutation,而不是直接变更状态

Action可以包含任意异步操作;

这里有一个非常重要的参数context:

context是一个和store实例均有相同方法和属性的context对象

所以我们可以从其中获取到commit方法来提交一个mutation,或者通过context.state和context.getters来获取state和getters

为什么它不是store对象? ==> 等说Modules再具体说

actions的分发操作

使用action => 进行action的分发:

分别使用store上的dispatch函数;

JavaScript
add() {
this.$store.dispatch("increment")
}

它可以携带参数:

JavaScript
add(){
this.$store.dispatch("increment",{ count:100 })
}
// ===========================================

JavaScript
nameBtnClick(){
    this.$store.dispatch("changeNameActions","xiaoxiong")
  }
  // 传递给下面的
// ====================================================
changeNameActions(context,payload){
    // console.log(payload); // payload就是传递过来的值
    context.commit("changeName",payload)
}

也可以以对象的形式进行分发(了解)

JavaScript
add(){
    this.$store.dispatch({
        type:"increment",
        count:100
    })
}

actions的辅助函数

action也有对应的辅助函数:

对象类型的写法;

数组类型的写法

JavaScript
methods:{
    ...mapActions(["increment","decrement"]),
    ...mapActions({
        add:"increment",
        sub:"decrement"
    })
}

Options API

JavaScript
methods:{
      // actionBtnClick(){
      //   // 点击按钮就派发
      //   this.$store.dispatch("incrementAction")
      // },
      // nameBtnClick(){
      //   this.$store.dispatch("changeNameActions","xiaoxiong")
      // }
      // Options API写法
      ...mapActions(["incrementAction","changeNameActions"])
    }

Setup写法:

JavaScript
<script setup>
  import { useStore,mapActions } from 'vuex'
  const store = useStore()

  // 在setup中使用mapActions辅助函数
  const actions = mapActions(["incrementAction","changeNameActions"])
  const newActions = {}
  Object.keys(actions).forEach(key => {
    newActions[key] = actions[key].bind({$store:store})
  })
  const { incrementAction,changeNameActions } = newActions

  // 2 使用默认的做法
  function increment(){
    store.dispatch("incrementAction")
  }
</script>

actions的异步操作

Action通常是异步的,怎么知道action什么时候结束?

可以通过action返回Promise,在Promise的then中来处理完成后的操作;

七、核心概念Modules

module的基本使用

什么是Module?

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store对象就有可能变得臃肿;

为了解决以上问题,Vuex允许我们将store分割成模块(module)

每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块

module的局部状态

对于模块内部的mutation和getter,接收的第一个参数是 模块的局部状态对象

module的命名空间

默认情况下,模块内部的action和mutation仍然是注册在全局的命名空间中的,

这样使得多个模块能够对同一个action或mutation作出响应

Getter同样也默认注册在全局命名空间

如果我们希望模块具有更高的封装性和复用性,可以添加namespaced:true的方式使其成为带命名空间的模块;

当模块被注册后,他的所有getter action 及 mutation 都会自动根据模块注册的路径调整命名;

module修改或派发根组件

如果我们希望在action中修改root中的state,有以下的方式:

coderHing[专注前端]

关注

29
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
27
评论
Vue | Vue.js 全家桶 Vuex状态管理

Vue | Vue.js 全家桶 Vuex状态管理 🖥️ Vue.js专栏：Vue.js 全家桶 Vuex状态管理🧑‍💼 个人简介：一个不甘平庸的平凡人🍬✨ 个人主页：CoderHing的个人主页🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️👉 你的一键三连是我更新的最大动力❤️
复制链接

扫一扫