# Vuex_demo2

**Repository Path**: AsyncTaskSola/vuex_demo2

## Basic Information

- **Project Name**: Vuex_demo2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vuex_demo2

## 学完了还是做个总结吧

----------
----------

#### 为什么要有`Vuex`呢，在我个人觉得吧，这个就是主要处理全局的通用数据（全局的数据这里大多数都是从接口得到的，这里要注意下【axios】是异步方法，这里只能写在stroe下的actions里），
#### 有了Vuex可以很简单的代替 原来在vue中的父子组件传值问题，父子之间的传值 【父-》子 props】，【子-》父 $emit 自定义事件】 这里就可以发现了无论是父->子，还是子->父的传值
#### 都是组件间（component）的传值，这个是不能越组件的，这样就会很麻烦了，所以就要用到了Vuex这个组件。这里可以会有人问那Vue组件下的data()又有什么用了，这里要记住data（）里面的
#### 是局部数据，这里存放的大多数是自己组件里的数据，参数，就比如组件上的开关那些disable，控制窗口的打开


## Vuex核心概念   以及  Vue里面的data不能直接操作store的数据
*  state(这块里面等于Vue中的data()中的字段声明)

*  Mutation（这块里面写的是同步代码【这里可以直接操作state里面的数据】） 如果要调用这里的代码Vue的组件里面可以有两种办法  这里在计算属性（compute）里面只能写第一种的方法
   ```
   1.
   [
   import {mapState} from 'vuex'  ...mapState([state的字段])
   ]
   2.
   [
      直接在vue methods的方法里面写  this.$store.commit(' Mutation里面的方法', 参数)
   ]
   ```
  
* actions (这块主要写的是异步代码 比如asios,settime延迟那些) 但记住只能通过context.commit 操作mutations的某个方法改变数字，自身不能直接改数据
  ```
   this.$store.dispatch('actions里面的方法')
  ```

* getters （这块主要是包装数据显示，不影响原有state里面的数据） 这个是可以直接调用state数据，却不会改变其值 【如果要调用这里的代码Vue的组件里面可以有两种办法  这里在计算属性（compute）里面只能写第一种的方法】
    ```
   1.
   [
   import {mapGetters} from 'vuex'  ...mapGetters([getters的方法字段])
   ]
   ```