《Vue 3基础入门》课件 第十章 Vuex.pptx

Vuex详解;C;01;;02;vuex安装;03;每一个Vuex应用的核心就是store（仓库），“store”可以看作一个容器，包含着应用中大部分的状态(state)，Vuex和单纯的全局对象有以下不同点：

（1）Vuex的状态存储是响应式的。当Vue3组件从store中读取状态的时候，若store

中的状态发生变化，那么相应的组件也会得到高效更新。

（2）不能直接改变store中的状态。改变store中状态的唯一途径就是显式地提交

(commit)mutation。这样Vuex可以方便跟踪每一个状态的变化，从而让Vuex能够实现一些工具帮助管理应用。;;04;获取状态

有时候需要从store的state中衍生出一些状态，例如对列表进行过滤并计数，代码如下：

computed:{

doneTodosCount(){

returnthis.$store.state.todos.filter(todo=todo.done).length

}

}

为了简化上述代码，Vuex允许在store中定义getters内的函数，简称为getter函数，getter函数接受state作为它的第一个参数，代码如下：

conststore=createStore({

state:{

todos:[

{id:1,text:...,done:true},

{id:2,text:...,done:false}

]

},

getters:{

//定义getter函数

doneTodos(state){

returnstate.todos.filter(todo=todo.done)

}

}

});04;05;;;06;Vuex状态异步更改方法;action通常是异步的，store.dispatch()函数可以处理被触发的action函数返回的Promise对象，处理完成后仍旧返回Promise对象。;07;;;谢谢观看！