最近在复习vue的知识,用文章的的形式记录下来,帮助自己记录一下,今天的内容就是vuex
vuex是什么
官方的解释是 Vue.js 应用程序开发的状态管理模式.这个概念有点模糊,我的理解就是他就是一个仓库,帮你存放一些你可能会多个地方用到的数据,以及一些关于这个数据获取/处理的一些方法.他主要包含了state.getter,mutation,action及moudle5个模块.
State
单一状态树 一个存放数据的地方.一个store对应一个state.我们在组件中使用vuex的数据就用mapState["xx"]或者store.state.xx直接使用数据
getter
在我们vuex中 可能一个状态树的层级过深我们需要...多次才可以获取我们想要的数据或者一些数据需要处理,我们就可以在最外层的state中 getter得到某个数据,直接使用``` getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) }
mapGetters["xx"]或者store.getters.xx直接使用数据
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,mutation对象,包含更改数据的方法.2个参数,一个是状态state,第二个是payload载荷. 使用commit提交,或者...mapMutations解构出来 store.commit('increment', { amount: 10 }) 注意.Mutation必须是同步代码 异步使用action
Action
action和muitation很像,比如是一个包含多个方法的对象,2个参数,可以在组价中直接diapath调用,或者mapActions解构. 不同的是action必须是异步的,而且不能直接更改状态,必须调用muitation的方法去更改.
Module
分模块.由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 namespaced: true,给模块加锁,避免模块之间的相互影响.当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
pinia
这是vue3新推出来的状态管理工具,和vuex相比更简洁. 它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据 pinia没有modules配置，没一个独立的仓库都是definStore生成出来的
