vuex 核心概念 state、mutations、actions、getters
核心概念
- state
- mutations
- actions
- modules
手动引入vuex
如果在vue脚手架中没有引入vuex需要进行手动配置。
在main.js中添加如下代码：
import store from 'vuex'
// 在创建vue实例时，将store挂载进去
new Vue({
render: h => h(App),
store
}).$mount('#app')
state
state中设置数据源，页面中所有在vuex中存放的数据都要放到store的state中进行存储。
export default new Vuex.Store({
state: {
number: 0
}
})
访问state中数据的两种方法
-
通过vue对象进行访问：
this.$store.state.number -
第二种方式：
-
在组件中导入mapState函数
-
组件中可以使用mapState函数将需要的数据映射为计算属性
-
示例：
-
// 在需要使用数据的组件中导入该函数
import { mapState } from 'vuex'
export default {
data () {
return {}
},
components: {
'my-add': add,
'my-sub': sub
},
// 设置为计算属性
computed: {
...mapState(['number'])
}~~
~~}
这样可以直接通过插值表达式访问number属性
mutations
mutations用于对store中的数据进行变更。
需要注意的是，只能通过mutations中的函数来变更数据，不能在组件中直接对数据进行更改。
在mutations中定义函数：
mutations: {
add (state) {
state.number++
},
sub (state) {
state.number--
}
},
在组件中调用函数需要通过this.$store.commit方法：
methods: {
addOne () {
this.$store.commit('add')
console.log('当前值为' + this.$store.state.number)
}
}
调用时传递参数
mutations对象中的函数是可以传递参数的，如果要传递参数至少需要2个形参，第一个位置的形参必须为state，从第二个形参开始才是要接受的参数。
在使用commit调用mutations里的函数时。第一个实参为要触发的函数（String类型），第二个实参才是要传递的参数。
如下代码所示：
在vuex中定义：
export default new Vuex.Store({
state: {
number: 0
},
mutations: {
add (state) {
state.number++
},
sub (state) {
state.number--
},
// 第一个参数传递state
addN (state, num) {
state.number += num
}
}
})
在组件中调用：
methods: {
addN () {
this.$store.commit('addN', parseInt(this.addNumber))
console.log('当前值为' + this.$store.state.number)
}
}
this.addNumber为双向数据绑定的input值
触发函数的另一种方式
在组件中导入mapMutations函数：
import { mapMutations } from 'vuex'
将需要的函数映射为当前组件中的methods：
methods: {
...mapMutations(['addN'])
}
这样可以通过this来调用导入的addN，使用这种方式导入的函数无需传递第一个参数如下代码所示：
不可以在mutations中处理异步代码
actions
在mutations中不要执行异步操作，应该通过Action来处理异步操作。
在vue的开发工具中：如果是同步代码，开发工具可以捕获到值的变换；但是如果是异步代码，页面中的值虽然变化了，但是开发工具不能够捕捉。如下图所示：
在actions中定义异步代码
异步代码在actions中执行，但是仍然需要使用commit去调用mutations的函数将数据进行更改。如下代码所示：
actions: {
// actions中的异步代码必须声明一个context参数，用来调用mutations中的函数
asyncAddOne (context) {
setTimeout(() => {
// 实质上还是通过调用add方法进行+1
context.commit('add')
}, 1000)
}
}
这样在vuex中异步+1的函数写好了，如果要触发actions中的函数需要下面操作。
触发actions中的异步函数
触发actions中的异步函数有两种方法。
通过vue对象触发
通过dispatch调用actions中的异步代码，如下代码所示：
千万不可以使用actions中的函数直接改变值，只能调用mutations中的函数，使mutations中的函数协助操作值
通过mapActions导入函数
与mapMutations的使用是一样的
getters
getters用来对state中获取的数据进行加工，但是不会更改state中的数据。
使用方法：
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
// 与state等同级
getters: {}
})
在getters中声明一个函数，函数中包含要获取的值和对值进行的加工。如下代码所示：
getters: {
showNumber(state) {
return `当前number值为：${state.number}`
}
}
调用getters中定义的函数，见下文
调用getters中的函数
仍然是两种方式：vue对象、挂载到计算属性
vue对象方式
this.$store.getters.showNumber
mapGetters方式
- 导入mapGetters函数
import { mapGetters } from 'vuex'
- 挂载到计算属性
computed: {
...mapGetters(['showNumber'])
}