vuex

---

    vuex 是 vue 中的状态管理工具，方便更好统一，快捷，高效的处理一些数据，也是学好 vue 的核心，所以我在此进行了记录，以便以后翻回来继续学习。

---

需要安装 vue vuex，vue 安装脚手架时已安装

# 安装 vuex
npm install vuex --save

# 创建状态管理文件夹(vuex)
{
    store
      index.js
      state.js
      actions.js
      getters.js
      mutations.js
}

---

src/main.js

...
import store from './store'

new Vue({
    ...
    store,
    ...
})

在 index.js 文件中对 vue 和 vuex 实例化

import vue from 'vue'
import vuex from 'vuex'

---

这里参照了https://juejin.im/entry/58b7a6cd61ff4b006cd56193的博客。
导出 vuex，下面使用了 es6 的语法，当属性名称与变量名相同时,可以简单书写名称。

# store/index.js
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

# state.js
# 存放状态数据
export default {
    list: [],
    showChildComponent: true,
    message: '给各个组件的消息'
}

# mutations.js
# 只能同步更改 state 中的数据
export default {
    add(state, data) {
        state.list.push(data)                     # 追加数据
    }
}

# getters.js
# state 中派生出来的状态，如将 state 中某个状态进行过滤获取的新状态
export default {
    filterList(state) {
        let len = state.list.length;
        let newList;
        for (let i = 0; i < len; i++) {
            let element = state.list[i];
            # state.list[i] 中的数组长度超过 10 时，存入 newList 中
            element.length > 10 ? newList.push(element) : null;
        }
    }
} 

# actions.js
# 可以异步的更改数据
export default {
    add({commit, state}, data) {
        setTimeout(function () {            
            # 延迟 2000 毫秒执行 mutations 中的 add 函数
            commit('add', data); 
        }, 2000)
    }
}

---

写在 index.js 文件中时(即不创建 state.js getter.js 等文件)

export default new Vuex.Store({
    state: {
        list: [],
        showChildComponent: true,
        message: '给各个组件的消息'
    },
    mutations: {
        add(state, data) {
            state.list.push(data)                     
        }
    },
    getter: {
        filterList(state) {
            let len = state.list.length;
            let newList;
            for (let i = 0; i < len; i++) {
                let element = state.list[i];
                element.length > 10 ? newList.push(element) : null;
            }
        }
    },
    action: {
        add({commit, state}, data) {
            setTimeout(function () {            
                commit('add', data); 
            }, 2000)
        }
    }
})

---

组件引用 vuex 中的数据

# 因为在 src/main.js 中引入 store 文件夹，所以全局组件都可以通过以下方法引入 vuex 中的数据
export default {
    name: 'Home',
    # 用 data 接收值，不能及时更新而 computed 可以
    computed: {
        message () {
            return this.$store.state.message
        }
    }
}

# mapState 辅助函数
import { mapState } from 'vuex'
export default {
    computed: mapState({
        list: 'list'
    })
}

# ...是对象展开符的扩展
import { mapState, mapMutations } from 'vuex'
export default {
    computed {
        ...mapState({
            list: 'list'
        })
    },
    methods: {
        ...mapMutations(['add']),
        # handleClick 触发事件，将 data 数据通过 mapMutations 中的 add 方法追加
        #  到 state 中 list 数组之后
        handleClick (data) {
            add(data)
        }
    }
}

---

    该文章后面还会继续追加自己不懂的内容，希望该文章方便到他人。

---