前端（vue）学习笔记（CLASS 7）：vuex

vuex概述

vuex是一个vue的状态管理工具，状态就是数据

大白话：vuex是一个插件，可以帮我们管理vue通用的数据（多组件共享的数据）

场景

1、某个状态在很多个组件来使用（个人信息）

2、多个组件共同维护一份数据（购物车）

优势

1、共同维护一份数据，数据集中化管理

2、响应式变化

3、操作简洁（vuex提供了一些辅助函数）

构建vuex $多组件数据共享$ 环境

基于脚手架创建项目，构建vuex多组件数据共享环境

效果是三个组件共享一份数据，任意一个组件都可以修改数据，三个组件的数据是同步的

首先需要安装vuex插件，初始化一个空仓库

1、安装vuex npm install vuex

2、新建vuex模块文件新建store/index.js专门存放vuex

3、创建仓库 Vue.use(Vuex)创建仓库 new Vuex.Store()

4、main.js导入挂载在main.js中导入挂载到Vue实例上

使用$store即可得到相关类

* 核心概念-state状态

1、提供数据：

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储

在state对象中可以添加我们要共享的数据

javascript 复制代码

const store = new Vuex.Store({
    state: {
        count: 101
    }
})

2、使用数据：

通过store直接访问

获取store

1、this.$store

2、import导入store

模板中：{{ $store.state.xxx }}

组件逻辑中：this.$store.state.xxx

JS模块中：store.state.xxx

通过辅助函数（简化）

mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中

1、导入mapState

2、数组方式引入state

3、展开运算符映射

使用方式：mapState( $'count$ )

* 核心概念-mutations

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

通过 strict: true可以开启严格模式

javascript 复制代码

const store = new Vuex.Store({
    //开启严格模式
    strict: true,
    //通过state可以提供数据
    state: {
        title: '仓库大标题',
        count: 100
    }
})

1、定义mutations对象，对象中存放修改state的方法

javascript 复制代码

const store = new Vuex.Store({
    //通过state可以提供数据
    state: {
        count: 100
    },

    mutations: {
        addCount (state) {
            state.count += 1
        }
    }
})

2、组件中提交调用mutations

javascript 复制代码

this.$store.commit('addCount')

* mutations传参语法

提交mutation是可以传递参数的`this.$store.commit('xxx', 参数)`

1、提供mutation函数（带参数-提交载荷payload）

javascript 复制代码

mutations: {
    ...
    addCount (state, n) {
        state.count += n
    }
},

2、页面中提交调用mutation

javascript 复制代码

this.$store.commit('addCount', 10)

Tips: 提交参数只能一个，如果有多个参数，包装成一个对象传递

* 实时输入

1、输入框内容渲染（:value)

2、监听输入获取内容(@input)

3、封装mutation处理函数(mutation传参)

4、调用传参(commit调用)

* 辅助函数：mapMutations

mapMutations和mapState很像，它是把位于mutations中的方法提取了出来，映射到组件methods中

javascript 复制代码

mutation: {
    subCount (state, n) {
        state.count -= n
    },
}

javascript 复制代码

import { mapMutations } from 'vuex'

methods: {
    ...mapMutations(['subCount'])
}

相当于

javascript 复制代码

methods: {
    subCount (n) {
        this.$store.commit('subCount', n)
    },
}

* 核心概念-actions

actions的基本语法，用于处理异步操作

说明：mutations必须是同步的（便于监测数据变化，记录调试）

1、提供action方法

javascript 复制代码

actions: {
    setAsyncCount (context, num) {
        setTimeout(() => {
            context.commit('changeCount', num)
        }, 1000)
    }
}

2、仍然需要通过mutations

javascript 复制代码

mutations: {
    changeCount (state, newCount) {
        state.count = newCount
    }
}

3、页面中dispatch调用

javascript 复制代码

this.$store.dispatch('setAsyncCount', 200)

* 辅助函数-mapActions

mapActions是把位于actions中的方法提取了出来，映射到组件methods中

即可

javascript 复制代码

import { mapActions } from 'vuex'

methods: {
    ...mapActions(['changeCountAction'])
}

* 核心概念-getters

getters的基本语法类似于计算属性

说明：除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

例如：state中定义了list，为1-10的数组，组件中，需要显示所有大于5的数据

javascript 复制代码

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

1、定义getters

javascript 复制代码

getters: {
    //注意
    //（1）getters函数的第一个参数是state
    //（2）getters函数必须要有返回值
    filterList (state) {
        return state.list.filter(item => item > 5)
    }
}

2、访问getters

通过store访问getters

通过辅助函数mapGetters映射

javascript 复制代码

computed: {
    ...mapGetters(['filterList'])
},

* 核心概念-模块module（进阶语法）

由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，

store对象就有可能变得相等臃肿。

模块拆分：

user模块：store/modules/user.js

例如：

javascript 复制代码

const state = {
    userInfo: {
        name: 'zs',
        age: 18
    }
}

const mutations = {}
const actions = {}
const getters = {}
export default {
    state,
    mutations,
    actions,
    getters
}

javascript 复制代码

import user from './modules/user'

const store = new Vuex.Store({
    modules: {
        user
    }
}

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的state中，属性名就是模块名

使用模块中的数据：

1、直接通过模块名访问$store.state.模块名.xxx

2、通过mapState映射

默认根级别的映射 mapState( $'xxx'$ )

子模块的映射 mapState('模块名', $'xxx'$ ) - 需要开启命名空间

javascript 复制代码

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

使用模块中getters中的数据：

1、直接通过模块名访问$store.getters $'模块名/xxx'$

2、通过mapGetters映射

默认根级别的映射 mapGetters( $'xxx'$ )

子模块的映射 mapGetters('模块名', $'xxx'$ ) - 需要开启命名空间

调用模块中mutation的调用语法

注意：默认模块中的mutation和actings会被挂载到全局，需要开启命名空间，才会挂载到子模块

调用子模块中的mutation：

1、直接通过store调用$store.commit('模块名/xxx', 额外参数)

2、通过mapMutations映射

默认根级别的映射 mapMutations( $'xxx'$ )

子模块的映射 mapMutations('模块名' , $'xxx'$ ) - 需要开启命名空间

使用模块中的action：

1、直接通过store调用$store.dispatch('模块名/xxx', 额外参数)

2、通过mapActions映射

默认根级别的映射 mapActions( $'xxx'$ )

子模块的映射 mapActions('模块名', $'xxx'$ ) - 开启命名空间