放图,这个图最能说明vuex和Vue之间的关系。
一、原理
虚线中的Vuex是用来处理vue的组件,vue compontents(组件)通过dispatch(理解为转发事件)交给action,通过接入后端api完成一些业务,在action中进行异步操作,再将结果以commit(提交事件)方式发给mutations。mutations中最终实现vue compontent的method。state用来存数据,交给组件在页面中显示。
devtools是vue为了适应浏览器的一个插件,在这个插件中可以看到vue响应的过程,包括每个对象,属性和value。
二、vuex组成
1、state
2、getter
3、mutations
4、actions
5、modules
1. state
相当于数据仓库,vuex中的数据放在store实例中,store对象包括 s以上5个部分。
store称为单一状态树:所有状态信息保存在一个store中,便于管理。
const store= new Vuex.Store({
state:{
//counter 数据变量
//保存数据,在其他地方引用$store.state.counter
},}
2. getter
用来获取数据,类似computed计算属性。
getters:{
// adddd(){
// }
//类似计算属性computed,使用时$store.getter.adddd}
//filter过滤,s代表student数组中的一个,结果返回学生信息。
this.$store.state.student.filter(s =>{
Return s.age>20})
等价于:
this.$store.student.filter(s=> s.age>=20)
//前一个>= 是过渡函数,filter格式,第二个>=是判断条件
more20(state){
},
more20Length(state,getter){
//调用getter中已有的函数getter.more20.length
}
},
3. mutations
在mutations中,vue组件的method,commit给mutation,mutation来处理。
用来修改数据,包括两部分:事件类型type+回调函数;
回调函数的参数被称为mutation的负载payload。
两种提交风格:
this.$store.commit(“appmethodTomutation”,count)
//此处事件类型appmethodTomutation,payload:count
//可以直接由vue.component-->mutations,执行同步操作
//如果有异步操作,则需要vue.component-->actions-->mutations
this.$store.commit({
type:” appmethodTomutation”, count })
- 响应式原理:界面刷新,state中的属性值跟着刷新。如果初始没有该属性,则不跟随响应。
- 添加属性:并跟随响应的方法push,pop,Vue.set(state.info,‘address’,’shandong’)
- 删除属性:Vue.delete(state.info,’age’)
- Miutation常量:将方法定义为常量,commit时写常量。
//常量:
this.$store.commit(INCERES)
//在mutation中 使用
[INCRESE]{方法 }
//还需要在mutation.js中单独定义
export const INCRESE=‘increse’
4.actions
vue的method dispatch给action,actions 中commit 给 mutations,最终在mutation中解决。
action执行异步操作:
(如setTimeout(()=>{ state.info.name=’xlkhj’ }, 1000),在mutation中都是同步操作。
Context上下文,相当于store
5. modules
store内容过多时可使用,将store的功能模块化,每个模块中又可以有state等。从module中的action取store中的值context.rootGetters。
三、在vue中使用vuex
Vue.use(Vuex)
//1、安装插件
//2、创建store对象
const store= new Vuex.Store
// 3、导出store对象:
export default store