vuex状态管理:vuex

什么是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>
posted @ 2022-11-22 14:25  SultanST  阅读(18)  评论(0编辑  收藏  举报