什么是VueX
vueX是一个状态管理工具,用来管理vue数据,可以实现组件之间数据共享;
它提供了一个公共内存,可以给这个内存提交数据或取数据;
vueX文件中的几个属性(vuex文件–src/store/index.js)
初始的vuex文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
state
用来定义一个数据,用法类似vue文件中的data
使用 $store.state.数据名
来调用数据
或者 导入 mapState 在计算属性中使用mapState 模板中可以直接使用计算属性
import { mapState } from 'vuex'
computed: {
...mapState(['count']), // 可以直接调用count 效果等同于 $store.state.count
}
mutations
不能再vue文件(组件)中直接修改state的数据,需要使用mutations定义方法来修改state的数据
mutations: {
add(state) { // 方法接收的参数为state对象
state.count++
}
}
触发方法的方式
// 基本
this.$store.commit('add')
// 导入mapMutations
import { mapMutations } from 'vuex'
methods: {
...mapMutations(['sub', 'subN']), // 可直接调用方法
}
// 可以传参,但mutations中只能接收一个参数
actions
mutations中只能处理同步的任务,不能处理异步任务,而actions不能修改state对象的值,所以可以再actions中异步调用mutations中的方法来异步处理state的数据
actions: {
addAsync(context) {
setTimeout(() => {
// 在 actions 中,不能直接修改 state 中的数据;
// 必须通过 context.commit() 触发某个 mutation 才行
context.commit('add')
}, 1000)
}
}
触发actions中的方法
// 基本方法
this.$store.dispatch('addAsync')
// 导入mapActions
import { mapActions } from 'vuex'
methods: {
...mapActions(['subAsync', 'subNAsync']),
}
// 传参也是只能传一个参数
注意: 异步方法中如果要修改数据, 仍然要调用mutations中声明的方法
getters
作用:当读取的值需要进一步处理时,可以使用getters
定义一个方法,接收state作为参数,return 返回处理结果
getters: {
showNum(state) {
return '当前最新的数量是【' + state.count + '】'
}
}
调用getters中的方法
// 基本使用
$store.getters.showNum
// 导入mapGetters
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['showNum'])
},