# vuex的基本使用
概念：是一个专为 Vue.js 应用程序开发的**状态管理模式**。这里主要是用来方便组件之间联系
**注意 ：
1.vuex不允许直接在组件中修改store的数据 ，如：this.$store.state.count++
2.mutations函数中不能写异步的代码，如：setTimeOut方法**
## 使用：
```
获取数据：
1.this.$store.store.xxx
2.计算属性：通过引入辅助函数(mapStore)，在计算属性中获取数据
触发方法：
一、同步的方法：
1.this.$store.commit('xxx')
2.通过引入辅助函数(mapMutation)，在methods中获取触发函数
二、异步的方法
1.this.$store.dispatch('xxx')
2. 通过引入辅助函数(mapAction)，在methods中获取触发函数
```
#### 在main.js中：
**~~不推荐直接在main中引入~~**
```
安装：
npm install vuex --save
导入：
import Vuex from 'vuex'
Vue.use(Vuex)
```
```
具体使用：
1.新建一个store文件夹，再键一个index.js
2.导入vue和vuex：import xx form “xx”
创建store对象：
const store = new Vuex.Store({
//state中存放的就是全局共享的数据
state: { count: 0 },
mutations: {
increment (state) {
state.count++
}
}
})
导出：export defult store
```
```
导入store：import store from “./store”
将store对象挂载到vue实例中：
newVue({
el:'#app',
router,
store, //store对象，挂载到vue实例中，所有的组件就可以直接从store中获取全局数据了
render:h=>h(App)
})
```
## 核心概念
1.State ： 提供唯一的数据源，所有共享的数据都要统一放到Store的State中进行存储
① 组件访问数据的第一种方式：this.$store.state.count (count是state中定义的数据对象中的数据)
② 组件访问数据的第二种方式 ：通过mapState辅助函数获取数据，先在组件中引入： import {mapStore} from ‘vuex’, 通过计算属性，将数据映射到组件中使用：computed:{ ...mapState(['count'])}，此时count在组件中就能使用了,如果这个变量名跟data中有冲突，可以用对象形式：computed:{ ...mapState({"count1" : 'count'})}
2.Mutation : 用来更改state数据的状态（修改数据），可以集中监控数据的变化
```
//定义mutations
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定义事件对象，处理数据和逻辑，state就是state对象，作为形参调用
add(state) {
// 变更状态
state.count++
}
}
})
```
① 在组件中触发mutation 的方式一：
a.
```
methods ： {
handle1( ){
this.$store.commit("add") //add是方法名，通过commit触发
}
}
```
b. 在组件中触发mutation 并传递参数的方式：
```
//定义mutations
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定义事件对象，处理数据和逻辑，state就是state对象，作为形参调用，step为传递的参数
addN(state，step) {
// 变更状态
state.count += step
}
}
})
组件中传递参数并使用：
methods ： {
handle1( ){
this.$store.commit("addN" ， 3) //add是方法名，通过commit触发，第二个参数为组件传递的参数
}
}
```
② 触发mutation的第二种方式：
在组件中按需导入mapMutations函数：`import { mapMutations } from 'vuex'`
通过刚才导入的mapMutation函数，将需要的mutations函数，映射为当前组件的methods方法中：`methods ： { ...mapMutations( [ 'add','addN'] )}`
```
//定义mutations
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定义事件对象，处理数据和逻辑，state就是state对象，作为形参调用，step为传递的参数
addN(state，step) {
// 变更状态
state.count += step
}，
sub(state){
state.count--
}
}
})
组件中使用：
methods : {
//将sub方法映射到组件中使用
...mapMutations(['sub']),
handle2( ){
//调用sub方法
this.sub( )
}
}
```
**携带参数用法和上面一致，添加第二个参数即可**
### 3.Action：用于处理异步任务
① 触发actions的第一种方法 ：
```
//定义actions
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//定义事件对象，处理数据和逻辑，state就是state对象，作为形参调用，step为传递的参数
addN(state，step) {
// 变更状态
state.count += step
}，
sub(state){
state.count--
}
}，
actions : {
//处理异步操作,1s后执行add方法
addAsync(context){
setTimeOut( ( )=>{
context.commit('add')
},1000)
}
}
})
组件中触发Action：
methods ： {
handle( ){
//触发actions的第一种方式,dispatch方法
this.$store.dispatch('addAsync')
}
}
**如果需要携带参数，像上面方法一样，添加第二个参数即可
```
② 触发actions的第二种方法 ：
在组件中导入mapActions：`import { mapActions from ‘vuex’`
```
在组件中 ：
methods ： {
...mapActions（[ 'addAsync']） // 将方法映射到组件中
//通过事件调用
handle(){
this.addAsync( )
}
}
```
## 4.Getter ： 用户对store中的数据进行加工处理形成新的数据
Getter可以对Store中已有的数据加工处理之后形成新的数据，类似vue的计算属性
store中的数据发生变化，Getter中的数据也会跟着变化
```
定义Getter
创建store对象：
const store = new Vuex.Store({
//state中存放的就是全局共享的数据
state: { count: 0 },
getters ： {
showNum ： state =>{ return '当前的数量是【'+ state.count +'】'}
}
}
})
```
在组件中使用getter方法一 ：
```
this.$store.getters.showNum(定义的名称)
```
在组件中使用getter方法二 ：
在组件中引入mapGetters ： `import {mapGetters} from 'vuex'`
在组件计算属性中：` computed ： {...mapGetter( ['showNum'] )}` //把属性映射到组件中使用 :{{showNum}}
- vue项目目录
- git
- git 使用
- git 新建和合并不同git分支
- vue使用element ui
- vue复选框
- vue使用富文本编辑器
- element 级联选择器使用
- vue使用时间过滤器
- vue form表单中使用table表格
- element ui图片上传（upload）功能
- 树形tree组件
- element 表格表头样式修改
- element ui添加loading动画
- table展开列
- el-tooltip提示框加for循环无法显示数据
- table合并
- table表头插槽，render-header警告
- table列表中鼠标放上去显示图片
- 表格中输入内容动态改变数据（箭头和颜色）
- 使用element ui表格跨页勾选
- 可编辑表格可分页
- 组件之间简单传值
- 从表格中选择其他表单子段
- router
- vuex
- vue接口写法
- 将后端返回的数字转成字符串显示在表格中
- element ui实现动态验证
- vue根据token判断登录
- vue修饰符
- js小案例
- 倒计时
- 验证码
- 带文字匹配搜索框
- 选项卡
- 复选框全选，反选，全不选
- 相册选择，鼠标放到图片上，对应图放大显示
- 敏感词过滤
- 进度条
- 点击按钮回到顶部
- 电影院选座
- 盒子移动
- 鼠标绑定一个盒子
- 档案建立，输入信息添加到表格
- 抽奖机
- 放大镜
- 购物车
- 飞机大战
- echarts案例
- 常规条形图
- 横向条形图
- 折线图
- 散点图
- 饼状图
- 地图
- 雷达图
- 仪表盘
- 条形堆叠图
- 微前端--qiankun框架
- node中间件
- 手机端样式自适应，格式化初始样式插件
- 简单的axios请求封装，无权限
- npm安装后缀-s或-d
- 系统环境变量
- 过滤字符串，不足两位前面添加0
- 概念问题
- async和await的区别
- created和mounted区别
- link和@import区别
- 排他算法
- 数组方法
- 数组扁平化
- 数组去重
- 遍历数组的四种方法
- vue数组中哪些方法时响应式的
- splice删除数组遇到的坑
- 展开运算符（...）用法
- 冒泡排序
- 判断数组中是否有重复
- 计算数组中某项出现的次数
- filter方法
- 将数组分割成多个指定长度的数组
- 常用数组方法整合
- 对象数据处理
- 合并对象：Object.assign( )
- Object.keys()，返回数组，自身枚举对象
- Object.values使用
- Object.entries使用
- vue中使用svg
- svg组件
- vue滑块验证
- 方法一：滑块验证
- 方法二：滑块插件
- vue配置不同的启动和打包环境
- js过滤日期
- js获取指定日期前一个月日期
- js指定日期与当前日期比较
- js截取字符串
- js截取字符串最后的逗号
- js截取图片后缀
- 前端监听网络
- vue.config.js解析
- 常用正则
- 闭包概念+闭包防抖节流
- vue插槽
- 网络安全栏
- canvas指纹追踪技术
- exif照片信息
- xss攻击
- vue中操作引导
- 封装全局loading组件
- vue更换主题方案（手动）
- vue项目打包优化
- 组件递归案例
- Promise及异步操作介绍
- vue-cli打包的dist文件怎么直接运行
- 浏览器页签通信（BroadcastChannel）
- nginx配置