vue状态管理存取数据_vue-状态管理

原理

场景：打算开发中大型应用

特点: 集中式数据管理, 一处修改，多处使用

思维:

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后