什么是vuex？
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这是vuex官网的解释。我们把它理解为在data中的属性需要共享给其他vue组件使用的部分，即data中需要共用的属性。
vuex的核心概念
1. this.$store：我们可以通过this.$store在vue的组件中获取vuex的实例。
2. State：vuex中的数据源，我们可以通过this.$store.state获取我们在vuex中声明的全局变量的值。
3. Getter：相当于vue中的computed，及计算属性，可以用于监听、计算 state中的值的变化。
4. Mutation：vuex中去操作数据的方法（只能同步执行）。
5. Action：用来操作Mutation 的动作，他不能直接去操作数据源，但可以把mutation变为异步的。
6. Module：模块化，当应用足够大的时候，可以把vuex分成多个子模块。
上手vuex
-
用
vue-cli构建一个项目，用命令npm install vuex --save来安装vuex -
在src文件夹下新建一个
vuex文件夹，并在文件夹下新建store.js文件
-
配置
main.js
import App from './App'
import router from './router'
import vuex from 'vuex'
Vue.use(vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
- 配置
store.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
export default new vuex.Store({
state
})
- 在components新建一个
count.vue组件，先引入，再注册，最后调用
<template>
<div>
{{$store.state.count}} <!-- 调用 -->
</div>
</template>
<script>
import store from '@/vuex/store' //引入
export default {
store //注册
}
</script>
<style>
</style>
- 在定义两个方法来改变
state中的值
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
const mutations={
add(state){ //此处的state是上面的state对象
state.count++
},
reduce(state) {
state.count--
}
}
//用export default 暴露，让外部可以使用
export default new vuex.Store({
state,
mutations
})
- 在组件中调用mutations的方法，要以commit的方式调用
<template>
<div>
{{$store.state.count}}
<div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
</div>
</template>
<script>
import store from '@/vuex/store'
export default {
store
}
</script>
<style>
</style>
从图中可以看到，已经实现了对vuex中的count加减操作
访问state的三种方式
把stroe.js中的值，赋值给我们模板里data中的值，有三种赋值方式：
1. 通过computed的计算属性直接赋值
computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。
export default {
store,
computed:{
count(state){
return this.$store.state.count
}
}
}
同时将模板中的$store.state.count改为count，效果不变
2. 通过mapState的对象来赋值
先引入mapState
import {mapState} from 'vuex'
再修改成如下代码：
computed:mapState({
count(state){
return state.count
}
})
3. 通过mapState的数组来赋值
computed:mapState(['count'])
这是最简单的写法，也是开发中最常用的方法
Mutations
接下来修改一下mutations中的add方法，给它加个参数
const mutations={
add(state,x){
state.count+=x
},
reduce(state) {
state.count--
}
}
在模板中相应修改：
<div>
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
类似之前的
state的属性的调用，mutations的方法调用也很麻烦，没有人会喜欢用$store.commit()去调用方法
模板获取Mutations方法
先引入mapMutations
import {mapState,mapMutations} from 'vuex'
在methods中加入mapMutations的方法
methods:mapMutations(['add','reduce'])
最后修改模板，就跟平时的调用方法一样了
<div>
<button @click="add(10)">+</button>
<button @click="reduce">-</button>
</div>
getters计算过滤操作
对count进行计算属性的操作，让它输出前先加上100
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
const mutations={
add(state,x){
state.count+=x
},
reduce(state) {
state.count--
}
}
const getters={
count(state){
return state.count+=100
}
}
//用export default 暴露，让外部可以使用
export default new vuex.Store({
state,
mutations,
getters
})
state和getters都是通过computed属性输出的，所以当getters的介入会覆盖掉state，所以使用es6的扩展运算符…
computed:{
...mapState(['count']),
count(){
return this.$store.getters.count
}
}
测试一下会发现每次都是+110，是因为点击一下，先通过
getters计算得到新的state（此时已经+100） 然后由mutation改变+10
用mapGetters简化模板写法
先引入mapGetters
import {mapState,mapMutations,mapGetters} from 'vuex'
修改成如下代码：
computed:{
...mapState(['count']),
...mapGetters(['count'])
}
Actions异步修改状态
actions和之前讲的mutations功能基本一样，不同点是，actions是异步的改变state状态，而mutations是同步改变状态。
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
const mutations={
add(state,x){
state.count+=x
},
reduce(state) {
state.count--
}
}
const getters={
count(state){
return state.count+=100
}
}
const actions={
actions_add(context){
context.commit('add',10)
},
actions_reduce({commit}){
commit('reduce')
}
}
//用export default 暴露，让外部可以使用
export default new vuex.Store({
state,
mutations,
getters,
actions
})
两个方法的传参不同：
-
ontext：上下文对象，即store本身 -
{commit}：直接把commit对象传递过来，更加清晰
模板使用Actions方法
引入mapActions
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
在methods中写入：
methods:{
...mapMutations(['add','reduce']),
...mapActions(['actions_add','actions_reduce'])
}
最后在模板中调用方法
<div>
<button @click="actions_add(10)">+</button>
<button @click="actions_reduce">-</button>
</div>
Module模块组
随着项目的复杂性增加，共享的状态越来越多，此时就需要对状态进行分组，分组后再进行按组编写，实现状态管理器的模块组操作。
新增两个文件夹，并且都新增一个store.js
在
test1/store.js中写入
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state = {
name: 'test1'
}
export default new vuex.Store({
state
})
复制test2/store.js中，修改name为test2
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state = {
name: 'test2'
}
export default new vuex.Store({
state
})
在根目录的store.js中引入这两个模块
import Vue from 'vue'
import vuex from 'vuex'
import modules1 from './test1/store'
import modules2 from './test2/store'
Vue.use(vuex)
export default new vuex.Store({
modules: {
modules1,
modules2
}
})
最后在模板中使用
<template>
<div>
{{name1}}
{{name2}}
</div>
</template>
<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
store,
computed:{
...mapState({
name1:({modules1})=>modules1.name,
name2:({modules2})=>modules2.name,
}),
}
}
</script>
<style>
</style>
网友评论