前端（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对象中可以添加我们要共享的数据

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可以开启严格模式

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

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

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

2、组件中提交调用mutations

this.$store.commit('addCount')

* mutations传参语法

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

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

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

2、页面中提交调用mutation

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

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

* 实时输入

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

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

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

4、调用传参(commit调用)

* 辅助函数：mapMutations

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

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

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

相当于

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

* 核心概念-actions

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

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

1、提供action方法

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

2、仍然需要通过mutations

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

3、页面中dispatch调用

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

* 辅助函数-mapActions

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

即可

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

* 核心概念-getters

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

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

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

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

1、定义getters

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

2、访问getters

通过store访问getters

{{ $store.getters.filterList }}

通过辅助函数mapGetters映射

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

{{ filterList }}

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

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

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

模块拆分：

user模块：store/modules/user.js 

例如：

const state = {userInfo: {name: 'zs',age: 18}
}const mutations = {}
const actions = {}
const getters = {}
export default {state,mutations,actions,getters
}

import user from './modules/user'const store = new Vuex.Store({modules: {user}
}

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

使用模块中的数据：

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

2、通过mapState映射

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

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

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']) - 开启命名空间