Vuex 快速入门(保姆级教程)
首先回顾组件通信:
1.父传子:props; 子传父:$emit()
2.非父子:eventBus:$on+$emit
3.非父子:Vuex
1.Vuex是什么?
Vuex是专门为Vue.js应用程序开发的状态管理模式,采用集中式管理应用到各个组件,从而解决多组之间的数据通信.
要点:
1.vue官方搭配.类似vue-route,有专门的调试工具
2.集中式数据管理使操作更简洁
3.数据变化是响应式的,
4.独立于组件体系之外的,管理公共数据的工具
2.Vuex的学习内容(5个概念)
1.state:存储公共数据(类似组件中的data) (核心)
2.mutations:改变数据的方法集合(类似methods) (核心)
3.getters:类似computed(利用现有的状态进行计算得到新的数据 -----派生)
4.actions:异步操作
5.modules:模块化拆分
3.怎么使用vuex
1.老项目中.额外安装vuex包;再配置
1.在store/index.js 中放置具体的代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
-------------------------------------------
2.在src/main.js中
// 1. 导入store
import store from './store'
new Vue({
store //注入store
// 省略..
})2.新项目中.在配置vue-cli中创建项目时可以手动选中vuex
4.组件与模板中使用
1.state
1.模板中 省略this
{{$store.state.xxx}}
{{$store.state.模块名.xxx}}
2.组件中
this.$store.state.xxx
this.$store.state.模块名.xxx
2.mutations
1.注册格式
mutations：{
// 每一项都是一个函数，可以声明两个形参
参数1:必选 就是当前state
mutation名1：function(state [, 载荷]) {
},
}
2.调用格式
// commit是固定写法
// 参数2:(可选) 如果要传递复杂数据,第二个参数可以是对象
this.$store.commit('mutation名', 实参，给第二个参数)
this.$store.commit('模块名/mutation名', 实参，给第二个参数)
Vuex-mutations拓展:
(1).Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
(2).不推荐直接在组件内部修改数据,特别是在严格模式下会报错。
---------------------------------------------
3.getters
1.定义格式
new Vuex.store({
// 省略其他...
getters: {
// state 就是上边定义的公共数据state
getter的名字1: function(state) {
return 要返回的值
}
}
})
2.使用格式
$store.getters.xxx
$store.getters['模块名/xxx']4.actions
1.action中可以通过调用 mutation来修改state，而不是直接变更状态
2.action 可以包含任意异步(例如ajax请求)操作。
1.定义
new Vuex.store({
// 省略其他...
actions: {
// context对象会自动传入，它与store实例具有相同的方法和属性
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改/保存数据
// context.commit('mutation名', 载荷)
}
}
})
2.使用
this.$store.dispatch('actions的名字', 参数)
this.$store.dispatch('模块名/actions的名字', 参数)
5.modules
export default new Vuex.Store({
// state: 用来保存所有的公共数据
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
模块名1： {
// namespaced为true，则在使用mutations时，就必须要加上模块名
// 如果为false 则不需加模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}，用了modules之后的结构
5.mapState辅助函数
作用:当数据嵌套太深,优化访问方式
1.mapState与mapGetters
1.导入 他们都是vuex中定义的工具函数
import {mapState} from 'vuex'
import {mapGetters} from 'vuex'
2.使用
//模板中用法相同
{{xxx}}
computed: {
...mapState('模块名',['xxx'])
...mapGetters('模块名',['xxx'])
},2.mapMutations与mapActions
1.导入
import {mapActions} from 'vuex'
import {mapMutations} from 'vuex'
2.使用
//模板中
//注意是写在methods 里面
methods: {
...mapMutations('模块名',['xxx']),
...mapActions('模块名',['xxx'])
},小结:
1:actions mutations state 关系图
2:核心API
