Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说运用vuex更方便管理我们的值 统一管理和维护各个vue组件的可变化状态(可以理解成 vue 组件里的某些 data)
vuex有五个核心概念state、getters、mutations、 actions,、modules
state:是一个单一的状态叔可以说相当于把vue组件中data中定义的转到了state中去这样就是全局数据整个项目都可以使用
getter:用来改变state中的数据值 可以认为是 store 的计算属性 就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。(组件中的computed不是全局,是属于组件内部的)
mutation:是用于提交改变state中定义数据的属性值
action:提交的是mutation,用commit提交 而不是直接变更状态,可以包含任意异步出操作
module:vuex拆分成多个模块 每个模块拥有自己的 state、mutation、action、getter
const store = new Vuex.Store({
state: {
//在这里写要定义在data中的
count:0
}
})
const app = new Vue({
//使用拿出定义在vuex中的count用计算属性
computed: {
count: function(){
return this.$store.state.count
}
},
//..
})
通过getters可以派生出一些新的状态
const store =new Vuex.Store({
state:{
//需要的数据源
todos:[
{id:1,text;'...',done:true},
{id:2,text;'...',done:true},
]
},
//通过此方法对todos数据源进行过滤,拿到新的数据源赋值给doneTodos
getters:{
doneTodos:state=>{
return state.todos.filter(tod0=>todo.done)
}
},
})
mutations
更改Vuex的store中的状态的唯一方法,也只能通过mutations去改变值
const store=new Vux.Store({
state:{
count:1
},
mutations:{
//随便自定义一个函数,参数是默认state 在自定义后还有一个是传来的参数
add(state){
//通过state.count拿到count属性值在进行自增
state.count++
}
},
actions:{
// actions也定义了increment;它默认接收一个context;context它可以直接去调用commit方法
// 这都是vuex全局注册进来的
// 通过context这个对象可以调用我们的commit来提交一个increment;这句话执行之后就会去调用mutation里面的increment方法,就会把count的值++;
add(context){
//通过commit的方法提交一个add,这时就会调用mutation中的add方法就会加加1
context.commit("add")
}
}
})
最后我们来了解一下Modules
面对复杂的应用程序,当管理的状态比较多时;我们需要将vuex的store对象分割成模块(modules)。
const moduleA = { // 通过const来定义一个moduleA,再定义一个moduleB;每个模块都包括
// stste,mutation,action,getters等;
// 只是说这些状态都是在A模块里面运用的;B模块里面也会应用到;但是如果我们的项目并不需要太多的状态管理;那么我们完全可以把它定义到vuex里面去;不需要进行拆分;
// 只有在我们的页面里面概念比较多,而又不想和别的页面进行混淆的时候;
// 大家可以把它拆分成每个模块
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
大致流程:组件中通过dispatch去触发actions定义的函数->接着actions通过commit去提交mutations然后去改变state值