一.vuex是什么?
vuex是vue官方提供的独立于组件体系之外的,管理公共数据的工具
二.vuex的使用
1.安装 vuex 包: npm install vuex
2.实例化store: 在src目录下创建store文件夹,然后在store文件夹下创建index.js.index.js的初始化代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
3.向Vue实例注入store:
// 省略其他
// 1. 导入store
import store from './store'
new Vue({
// 省略其他...
store // 2. 注入Vue实例
})
4.在组件中使用store:在任意组件中,
a.通过this.$store.state 来获取公共数据。
b.通过this.$store.commit('mutation名', 实参(给第二个参数))来修改数据
c.通过$store.getters.getter的名字来对现有的状态进行计算得到新的数据-------派生
d.通过this.$store.dispatch('actions的名字', 参数)调用mutation来修改state,并且可以包含任意异步函数(ajax请求)
三.vue-devtool调试工具
四. state
1.作用:统一定义公共数据(类似于data(){return {a:1, b:2,xxxxxx}})
2.格式:
new Vuex.store({
state: {
属性名: 属性值
}
})
3.小结:state的作用是保存公共数据(多组件中共用的数据),它是响应式的,如果修改了数据,相应的在视图上的值也会变化
4.图解:
五.mutations
1.作用:通过他来修改state中的公共数据(类似于methods)
2.格式:
new Vue.store({
// 省略其他...
mutations:{
// 每一项都是一个函数,可以声明两个形参
mutation名1:function(state [, 载荷]) {
},
mutation名2:function(state [, 载荷]) {
},
}
})
3.小结:第一个参数是必须的,表示当前的state.在使用时不需要传入,第二个参数是可选的,表示载荷,是可选的,在使用时需要传入数据(如果有多个数据的话,可以用对象的形式传入数据)
4.图解:
六.getters
1.作用:类似于computed(计算属性,对现有的状态进行计算得到新的数据-------派生 )
2.格式:
new Vuex.store({
// 省略其他...
getters: {
// state 就是上边定义的公共数据state
getter的名字1: function(state) {
return 要返回的值
}
}
})
3.小结:它的作用是从已有的公共数据项中派生出新的数据项,类似于computed
4.图解:
七.actions
1.作用:可以使用actions来修改state,这一点是类似于mutation的,不同在于:
a.action中是通过调用mutation来修改state,而不是直接变更状态
b.action可以包含任意异步(例如ajax请求)操作
2.格式:
new Vuex.store({
// 省略其他...
actions: {
// context对象会自动传入,它与store实例具有相同的方法和属性
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改/保存数据
// context.commit('mutation名', 载荷)
}
}
})
3.小结:action一般用来发异步请求,数据回来之后,在去调用mutations来保存数据
4.图解:
八.module
1.作用:拆分模块,把复杂的场景按模块来拆开
2.格式:
export default new Vuex.Store({
// state: 用来保存所有的公共数据
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
模块名1: {
// namespaced为true,则在使用mutations时,就必须要加上模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
},
模块名2: {
// namespaced不写,默认为false,则在使用mutations时,不需要加模块名
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}
}
})
3.小结:
a.使用了modules之后,在访问数据时就要额外添加modules的名字了。
b.在使用modules时,建议都给加上namespaced:true
4.图解:
九.vuex辅助函数:
前提:以下所有方法都需要先导入
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
(假设以下所有的modules模块名为userInfo)
1.mapState
a.直接使用:
全局:this.$store.state.xxx
局部:this.$store.state.模块名.xxx
b.定义:
全局:
computed: {
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}
局部:
computed: {
...mapState('模块名', ['xxx']),
...mapState('模块名', {'新名字': 'xxx'})
}
c.使用:
全局:{{ xxx }}
局部:{{ userInfo.name }}
2.mapGetters
a.直接使用:
全局:this.$store.getters.xxx
局部:this.$store.getters[模块名/xxx]
b.定义:
全局:
computed: {
...mapGetters(['xxx']),
...mapGetters({'新名字': 'xxx'})
}
局部:
computed: {
...mapGetters('模块名', ['xxx']),
...mapGetters('模块名',{'新名字': 'xxx'})
}
使用:
全局和局部一样:{{ xxx }}
3.mapMutations
直接使用:
全局:this.$store.commit('mutation名', 参数)
局部:this.$store.commit('模块名/mutation名', 参数)
定义:
全局:
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}
局部:
methods: {
...mapMutations('模块名', ['this.mutation名']),
...mapMutations('模块名',{'新名字': 'this.mutation名'})
}
使用:
全局和局部一样:this.mutation名()
4.mapActions
直接使用:
全局:this.$store.dispatch('action名', 参数)
局部:this.$store.dispatch('模块名/action名', 参数)
定义:
全局:
methods: {
...mapActions(['actions名']),
...mapActions({'新名字': 'actions名'})
}
局部:
methods: {
...mapActions('模块名', ['xxx']),
...mapActions('模块名',{'新名字': 'xxx'})
}
使用:
全局和局部一样:this.action名()