Vuex 笔记 总结

### vuex 

#### ---State    状态   ...mapstate([])
---> 1 组件访问 Stae中数据的第一种方式
    this.$store.state.全局数据名称

---> 2 组件访问 Stae中数据的第二种方式
     (1)导入mapState函数
        import {mapState} from 'vuex'
     (2)将导入的mapState 函数将组件需要的映入到组件的计算属性中
        computed:{
            ...mapState(['count'])
        }
      (3) 把count 写到页面
### ----Mutation
#### 改vuex的数据 不可以直接改 
### 要在store页面中mutation更改 使用页面通过commit()触发
     更改 store 数据要用 mutation 在mutation里修改
        1首先在 触发的点击事件定义
            add(){
                调用commit函数 触发mutations
                this.$stotre,commit("store定义的名字（add）")
            }
        2然后在store文件中定义 修改
            mutations:{
                add(state){
                    satate.count ++
                }
            }
        3 还可以自定义更改数值 
        add(){
                调用commit函数 触发mutations
                this.$stotre,commit("add",4)
            }
        4然后在store文件中定义多加个参数接受
            mutations:{
                add(state,str){
                    satate.count += str
                }
            }
### ----Action
### vuex异步 只能在store页面中 actions中 使用页面通过dispatch()触发
### 注意 在store页面 不可以直接修改state数据 必须通过context.commit触发某个mutation才行
        1 在store页面写
            // context 相当于store实例
            actions: {
                addAsync(context){
                setTimeout(()=>{
                    <!-- add是你掉用mutations方法 -->
                    context.commit('add');
                },1000)
                }
            },
        2 // 异步的
            ch2(){
                this.$store.dispatch('addAsync');
            }

###  Getter  相当于计算属性
### Getter 对于Stoter 中数据进行加工处理 形成新的数据
    1 使用getters的第一种方式 
### 用法1  this.$store.getters.名称
    页面用{{this.$store.getters.名称}}调用 store中getters定义的逻辑

    2 使用getters的第二种方式
###  用法2 
    1页面中 使用结构 import {mapGetters} from 'vuex'
    2 在computed:{
            ...mapGetters(['store的逻辑名'])
            }

---Getter 中的方法有两个参数 
    --state 当前vuex 对象中的状态对象
    --getters 当前getters对象，用于将getters下的其他getter拿来用
    ...mapGetters 辅助函数仅仅是将store中的getter映射到局部的计算属性
### Module  多组配套↑↑↑ 的集合
    当项目庞大 状态非常多时 可以采用模块化管理模式 vuex允许我们将store分割成模块(module)
    每个模块 都拥有自己的state  mutation  action  getter 甚至是嵌套子模块进行从上到下的方式分割
    namespaced:true 每组导出都得命名空间