标签：import 更改 count comm mit 核心 应用程序 添加 apm
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
通俗点讲就是管理各种交互数据的
什么情况下使用Vuex?
当自己因为组件间数据交互越来越复杂,而代码越写越迷糊时,就可以使用Vuex了
安装Vuex
Vue.use()来安装 Vuex：import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
开始使用
创建一个 store, 直接store.state就可以获取状态对象;使用模块化时,把store挂载到Vue实例上,全局使用this.$store.state获取对象
核心概念
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、甚至是嵌套子模块——从上至下进行同样方式的分割
... 待续
标签：import 更改 count comm mit 核心 应用程序 添加 apm
原文地址：https://www.cnblogs.com/guilishabai/p/9344527.html
