vue2学习(06)----vuex

目录

一、vuex概述

1.定义

优势：

2.构建环境步骤

3.state状态

4.使用数据

4.1通过store直接访问

4.2通过辅助函数

5.mutations修改数据（同步操作）

5.1定义

5.2步骤

5.2.1定义mutations对象，对象中存放修改state数据的方法

5.2.2mutations的传参语法

5.2.3利用辅助函数mapMutations

6.actions异步处理操作

6.1提供actions方法

6.2辅助函数mapActions

7.getters基本语法（没有修改只有获取）

7.1直接通过store访问getters

7.2通过辅助函数mapGetters访问

8.module模块

8.1所以以我们在开发项目过程中， 需要对模块进行拆分--->在store下面新建modules文件夹

8.1.1配置模块文件

8.1.2导入store中并且配置到modules中使用

8.2分模块之后，如何使用模块中的state、mutations、actions以及getters方法

8.2.1直接通过模块名访问

8.2.2通过辅助函数映射---默认跟级别的映射

8.2.3通过辅助函数进行子模块的映射

8.2.4关于actions方法中的context

8.3模块中更推荐的state配置写法

---

一、vuex概述

1.定义

vuex是一个状态管理工具，可以帮助我们管理vue通用的数据（多组件共享的数据）

优势：

• 共同维护一份数据，数据集中化管理
• 响应式变化
• 操作简洁

2.构建环境步骤

• 安装vuex----->yarn add vuex@3---->此时用的是vue2所以要使用vuex3的版本
• 新建store目录文件夹存放单独的js文件存放vuex
• Vue.use(Vuex)
• 创建仓库---->cosnt store = new Vuex.Store()
• 在main.js中导入并且挂载在实例上

通过this.$store访问到仓库---->所有组件都能访问到的通用的对象

3.state状态

1.定义

类似于与vue组件中的data，都是指的数据

2.提供数据

state提供的唯一的公共数据元，所有共享的数据都要统一放到store中的state中存储，在state对象中可以添加我们要共享的数据

const store = new Vuex.Store({
    state: {
        //数据
    }
})

注意：data中的数据是自己的数据，state中的数据是所有组件共享的数据

4.使用数据

通过store直接访问或者通过辅助函数（辅助函数访问更简单）

4.1通过store直接访问

//获取store
import store from '路径'
//利用this.store访问到仓库


//在模板中使用
{{ $store.state.xxxx }}


//组件逻辑中
this.$store.state.xxxx


//js模块中书写方法
store.state.xxxx

4.2通过辅助函数

定义：把state中数据定义在组件内的计算属性中，{{计算属性}}，mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中

//导入辅助函数
import { mapState } from "vuex"



//使用辅助函数，用数组方式引入state
mapState(['变量'])



//展开运算符映射到计算属性中
computed：{ ...mapState(['变量']) }

5.mutations修改数据（同步操作）

5.1定义

明确vuex同样的遵循单向数据流，组件中不能修改仓库中的数据

通过strict:true，可以开启严格模式（在其他组件中直接修改仓库中的数据会报错，在最终上线的时候不用开启严格模式。因为严格模式是为了更好的提醒程序员出错点以及原因便于修改）

若是想要修改state中的数据那么只能通过mutations

5.2步骤

5.2.1定义mutations对象，对象中存放修改state数据的方法

const store = new Vuex.Store({
    state:{....},
    mutations:{
        mutations函数名(state){  
            //state.数据修改逻辑
        }
    }
})



//组件中调用
this.$store.commit('mutations函数名')

5.2.2mutations的传参语法

//传递一个参数的情况
const store = new Vuex.Store({
    state:{....},
    mutations:{
        mutations函数名(state，参数){  
            //state.数据修改逻辑
        }
    }
})



//组件中调用
this.$store.commit('mutations函数名',参数)





//传递多个参数则采用对象模式
const store = new Vuex.Store({
    state:{....},
    mutations:{
        mutations函数名(state，obj){  
            //state.数据修改逻辑
        }
    }
})



//组件中调用
this.$store.commit('mutations函数名',{参数1:值1,参数2:值2....})

5.2.3利用辅助函数mapMutations

mapMutations本质上就是把mutations中的方法提取出来，映射到组件的methods中

//在mutations中提供方法
const store = new Vuex.Store({
    state:{....},
    mutations:{
        mutations函数名(state,参数){  
            //state.数据修改逻辑
        }
    }
})

//映射到组件的methods中
import { mapMutations } from 'vuex'
methods:{ 
     ...mapMutations(['mutations函数名']) 
}


//组件中调用
this.函数名(参数)    //可以直接利用click点击直接调用并传参

6.actions异步处理操作

6.1提供actions方法

//提供actions方法
const store = new Vuex.Store({
    state:{....},
    mutations:{....},
    actions:{
        actions函数名(context,参数){
            //异步处理逻辑(如发请求)
        }
    }
})


//页面中调用
this.$store.dispath('actions函数名'，参数)

actions处理异步操作但是并不会直接操作state，如果想要修改state，需要调用mutations方法

----->context.commit('mutations函数名',额外参数)

6.2辅助函数mapActions

同mutations一样，直接映射到组件中的methods中，可以直接调用

//在mutations中提供方法
const store = new Vuex.Store({
    state:{....},
    mutations:{....},
    actions:{
        actions函数名(context,参数){
            //异步处理逻辑(如发请求)
        }
    }
})

//映射到组件的methods中
import { mapActions } from 'vuex'
methods:{ 
     ...mapActions(['actions函数名']) 
}


//组件中调用
this.函数名(参数)

7.getters基本语法（没有修改只有获取）

有时候需要从state中派生出一种状态，这些状态时依赖于state的，此时就会用到getters

7.1直接通过store访问getters

//提供actions方法
const store = new Vuex.Store({
    state:{....},
    mutations:{....},
    actions:{....},
    getters:{
        getters函数名(state){
            //处理逻辑
            return getters计算结果
        }
    }
})


//页面模板中通过store访问getters
{{ $store.getters.getters函数名 }}

7.2通过辅助函数mapGetters访问

//提供actions方法
const store = new Vuex.Store({
    state:{....},
    mutations:{....},
    actions:{....},
    getters:{
        getters函数名(state){
            //处理逻辑
            return getters计算结果
        }
    }
})


//映射到组件的methods中
import { mapGetters } from 'vuex'
computed:{ 
     ...mapGetters(['getters函数名']) 
}


//组件中调用
{{ getters函数名 }}

四个辅助函数记忆：

• mapState 和 mapGetters 是在映射属性
• mapMutations 和 mapActions 是在映射方法

8.module模块

由于vuex是使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，state对象就可能变得臃肿且难以维护。

8.1所以以我们在开发项目过程中， 需要对模块进行拆分--->在store下面新建modules文件夹

8.1.1配置模块文件

//在模块文件中

//配置state数据对象
cosnt state = {
    数据：{
        key:value,
        key1:value,
        ...
    }
}


//配置mutations方法
const mutations = {},

//actions方法
const actions = {},

//配置getters方法
const getters = {}

//导出配置对象
export default {
    state,
    mutations,
    actions,
    getters
}

8.1.2导入store中并且配置到modules中使用

//导入store中

import 文件名 from '路径'

//配置modules对象
 const store = new Vue.Store({
    modules:{
        文件名,
        ...
    }
})

8.2分模块之后，如何使用模块中的state、mutations、actions以及getters方法

分模块之后，各模块的辅助函数的参数state时指代子模块中的state

8.2.1直接通过模块名访问

//直接通过模块名访问state

$store.state.模块名.xxx

//直接通过模块名访问getters

$store.getters['模块名/xxx']

//直接通过模块名访问mutations

$store.commit('模块名/xxx',额外参数)

//直接通过模块名访问actions

$store.dispatch('模块名/xxx',额外参数)

8.2.2通过辅助函数映射---默认跟级别的映射

//直接通过mapState访问state----默认根级别的映射

mapState(['xxx'])

//直接通过mapGetters访问getters----默认根级别的映射

mapGetters(['xxx'])

//直接通过mapMutations访问mutations----默认根级别的映射

mapMutations(['xxx'])

//直接通过mapActions访问actions----默认根级别的映射

mapActions(['xxx'])

8.2.3通过辅助函数进行子模块的映射

//需要在子模块中开启命名空间

namespaced:true

//直接通过mapState访问state----子模块的映射

mapState('模块名',['xxx'])

//直接通过mapGetters访问getters----子模块的映射

mapGetters('模块名',['xxx'])

//直接通过mapMutations访问mutations----子模块的映射

mapMutations('模块名',['xxx'])

//直接通过mapActions访问actions----子模块的映射

mapActions('模块名',['xxx'])

8.2.4关于actions方法中的context

context是上下文的意思，默认提交的就是自己模块的actions和mutations方法，基于当前模块环境指向不同的空间

8.3模块中更推荐的state配置写法

export default {
    namespaced:true,
    state () {    //利用函数的形式存储数据使其更加具有独立性
         return {
            //数据
        }
    }
}