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