2020.5.17 星期日 10:56

https://vuex.vuejs.org/zh/guide/hot-reload.html

1. 安装
2. Vuex 是什么？
3. 开始
4. 核心概念
5. State
6. Getter
7. Mutation
8. Action
9. Module
10. 项目结构
11. 插件
12. 严格模式
13. 表单处理
14. 测试
15. 热重载

总结

## 基本规则
Vuex 使用单一状态树
单状态树和模块化并不冲突
从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

## 概念和使用
// this.$store 有state，getter，mutation，action;module || commit,dispatch
import { mapState,mapGetters,mapMutations,mapActions } from ‘vuex’

Action 1）提交的是 mutation，而不是直接变更状态。2）可以包含任意异步操作。

### 映射 mutation和action

你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）。

### mutation 提交方式
每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

// 1） 向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
store.commit('increment', { amount: 10 })
// 2） 对象风格的提交方式   
store.commit({type: 'increment',amount: 10})

SMTC

const muduleA={
    state:{

    },
    getters:{
        sumWithRootCount (state, getters, rootState) {
            return state.count + rootState.count
        }
    },
    mutations:{
        increment (state, payload) {
            state.count += payload.amount
        }
    },
    actions:{
        incrementIfOddOnRootSum ({ state, commit, rootState }) {
            if ((state.count + rootState.count) % 2 === 1) {
                commit('increment')
            }
        }
    },
    
}
const store={
    actions: {
        // action 2: Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象 || 不是 store 实例本身了 （modules相关）
        increment (context) {
            context.commit('increment')
        },
        // Action 3） store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
        increment ({ dispatch,commit }) {
            return dispatch('actionA').then(() => {
                commit('someOtherMutation')
            })
        },
        async actionB ({ dispatch, commit }) {
            await dispatch('actionA') // 等待 actionA 完成
            commit('gotOtherData', await getOtherData())
        }
    }
}
// # 使用
import { mapState,mapGetters,mapMutations,mapActions   } from 'vuex'
export default {
    // ...
    computed:{
        localComputed () { /* ... */ },
        // ## 0 原始
        /* count () {
            return this.$store.state.count
        }, */
        // ## 1 规范 mapState
        ...mapState({
            // ### 箭头函数可使代码更简练
            count: state => state.count,

            // ### 传字符串参数 'count' 等同于 `state => state.count`
            countAlias: 'count',

            // 为了能够使用 `this` 获取局部状态，必须使用常规函数
            countPlusLocalState (state) {
                return state.count + this.localCount
            }
        }),
        // 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
        //  mapState(['count']),
    }
    methods: {
        ...mapActions([
            'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
            // `mapActions` 也支持载荷：
            'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
        ]),
        ...mapActions({
            add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
        })
    }

}

文档

Vuex 是什么？

状态管理模式:state, view,action
把组件的共享状态抽取出来，以一个全局单例模式管理

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。
与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

严格模式

无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
### 开发环境与发布环境
不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。

表单处理

1）给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用一个方法:
2）另一个方法是使用带有 setter 的双向绑定计算属性

export default {
    computed: {
        message: {
            get () {
                return this.$store.state.obj.message
            },
            set (value) {
                this.$store.commit('updateMessage', value)
            }
        },
    }
}