原理
场景:打算开发中大型应用
特点: 集中式数据管理, 一处修改,多处使用
思维:
store
this.$store.commit('increment')-> mutations
this.$store.dispatch('jia')-> actions
mapActions() ->actionsmapGetters()->getters
学生代课老师校长 财务 版主任学生
components - > actions-> mutations -> state
发送请求 处理修改状态
业务逻辑修改state 读取state
异步
state
安装 安装包 npm i vuex -s
引入 import vuex from 'vuex
安装插件 Vue.use(vuex)
注册到根 new Vue({store})
①store.js
引入vue和vuex
实例store对象
let store =new
②main.js注册到根
③在store.js引入actions,mutations,getter,state,写在实例内作为对象
④各个模块单独的js文件内部暴露export
案例,点击让数字从0++
把 mapActions,mapGetters 引入把想action请求的方式写在methods内,然后去往actions
vuex
import vuex from 'vuex'
// console.log(vuex) //vuex={store,mapActions,mapGetters}
// 解构赋值
// import varname from {}
// let varname={}
// let {a,b}={a:1,b:2}
// a→1
// b→2
import {mapActions,mapGetters} from 'vuex'
export default {
data() {
return {
count:0
}
},
methods: {
jia(){
// console.log(this.$store)
// console.log(mapActions,mapGetters)
// this.$store.dispatch(请求类型,负载,配置)
this.$store.dispatch('jia',1)
}
},
}
最后完成,如果想直接从state拿数据就在app.vue的
{{this.$store.state.count}}
2、上面是comonent直接从state拿的数据,没有通过getters,下面通过getters拿数据
3、在2里面虽然通过getters拿数据,但是没有用mapActions
在template模板中是
methods: mapActions(['jia']),
引用types后