Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
通俗点讲就是管理各种交互数据的
什么情况下使用Vuex?
当自己因为组件间数据交互越来越复杂,而代码越写越迷糊时,就可以使用Vuex了
安装Vuex
- 直接去官网下载,然后再script中引用,就像jquery一样,(这样引用除非是写demo练习,实际工作中好像没人这样用,反正我没用过)
- 使用Vue-cli时 npm install vuex --save ,在一个模块化的打包系统中，必须通过
Vue.use()来安装 Vuex：
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex)
开始使用
创建一个 store, 直接store.state就可以获取状态对象;使用模块化时,把store挂载到Vue实例上,全局使用this.$store.state获取对象
const store = new Vuex.Store({
state: {
count: 0
}
// state 使用模块化的话,可以单独写一个js引入
})
console.log(store.state.count) // => 0
核心概念
Vuex.Store()中传入的参数
state : 定义原始数据 通过 this.$store.state 获取,还可以通过vuex封好的api mapState获取
mport { mapState } from ‘vuex‘
computed: {
...mapState({
// count: ‘count‘,
// count: state => state.count
})
}
// 传入数组
...mapState([
‘count‘
])//this.count访问
mutations: 更改 Vuex 的 store 中的状态, mutations对象里面定义一个函数, 函数里面只能写同步函数,通过this.$store.commit(‘changeCount‘, 999999999)改变count,也可以mapMutation改变
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
changeCount (state, n) {
state.count = n
}
}
}) // mutations中changeCount为自己定义的函数,state为定义的原始数据对象,n为传进参数,多个参数需以对象形式传入
this.$store.commit(‘changeCount‘, 999999999) // 此时count 为 999999999
import {mapMutations} from ‘vuex‘
methods: {
...mapMutations({
changeCount: ‘changeCount‘
})
} //此时可以调用this.changeCount(999999999)改变count
getters: 获取数据,获取原始数据或者把原始数据处理成自己想要的格式暴露出来,getters里面自定义一个函数getNewCount,参数state为原始数据对象,通过this.$store.getters.getNewCount触发,也可以通过mapGetters触发
getters: {
getNewCount (state) {
return state.count + 1
}
}
// count自定义函数state原始数据对象
this.$store.getters.getNewCount
// 触发getters 得到1
import {mapGetters} from ‘vuex‘
computed: {
...mapGetters({
newCount: ‘getNewCount‘
})
}
// this.newCount访问
getters: {
count(state => state.count)
}
// 一般获取count原始值用getters包装一层,不直接用this.$store.state获取
actions: actions 类似于 mutations, actions 提交的是 mutations，而不是直接变更状态。actions 可以包含任意异步操作。当多个mutations要同时触发时,可以通过actions封装一个自定义函数all,通过this.$store.dispatch(‘all‘, {count: 1, num: 2})触发, 也可用mapActions触发
mutations: {
changeCount (state, n) {
state.count = n
},
changeNum (state, n) {
state.num = n
}
},
actions: {
all (store, {count, num}) {
store.commit(‘changeCount‘, count)
store.commit(‘changeNum‘, num)
}
},
// 再定义一个原始数据num: 0,mutations中添加一个改变num的函数, //actions中all为自定义函数,参数store等价于new Vue.Store()出来的实例,剩余参数需要以对象形式传入
this.$store.dispatch(‘all‘, {count: 1, num: 2})
// actions中的all函数会同时触发‘changeCount‘,‘changeNum‘改变数据
import {mapMutaions} from ‘vuex‘
methods: {
...mapActions({
all: ‘all‘
})
}
// 直接调用 this.all({count: 1, num: 2}) 改变数据
modules: 当应用变得非常复杂时, 将 store 分割成模块。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
... 待续
原文地址：https://www.cnblogs.com/guilishabai/p/9344527.html