vue 之 vuex入门

这段时间一直在搞vue相关的项目，期间尝试使用vuex相关的技术，下面是一点点在这方面的总结。

一、什么是vuex

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

二、使用案例（我这里是把vuex配置成全局方法使用）

1. 安装vuex
   npm install vuex --save
2. 编写vue文件
   一些大型项目会把vuex这部分结构分解的很细致可以参考Vue组件通信深入Vuex，我这里只是做一个示例，就不做细致分解了，只简单了解一下使用。
   首先在src文件夹下新建vuex文件夹，而后在vuex文件夹下新建index.js文件。src->vuex->index.js

//  /src/vuex/index.js
import Vue from 'vue';
import Vuex from 'vuex';
// 状态数据管理
Vue.use(Vuex)
// 简单的应用
// 1. state
const state = {
    userInfo: {}
};
// 2. getters(computed->dataName->getters)
const getters = {
    userInfo(state) {
        return state.userInfo;
    }
};
// 3. actions(dispatch)
const actions = {
    // 参数列表：{commit, state}
    // state指的是state数据
    // commit调用mutations的方法 
    // 假设userInfoData是调用后台接口得到的数据 
    getUserInfoData({
        commit,
        state
    }) {
        // 跟后台打交道
        let userInfoData = ''
        // 调用mutaions里面的方法
        commit("setUserInfo", userInfoData);
    }
};
// 4. mutations(commit)
const mutations = {
    // 设置userInfo
    setUserInfo(state, info) {
        state.userInfo = info;
    }
};
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
});
export default store;

2. 在入口文件main.js中引入vuex

import store from './vuex';

new Vue({
  el: '#app',
  router,
    store,
  components: { App },
  template: '<App/>'
})

3. 在组件中使用
   vuex总体分为四个方法：①. state (全局变量的数据)；②. getters (用来获取数据的方法)；③. actions (跟后台接口打交道的方法)；④. mutations (存储数据的方法)。

// src/page/index.vue
<template>
    <view>
        <span>{{userInfo}}</span>
        <button type="button" @click="setUserInfo"></button>
        <button type="button" @click="updateUserInfo"></button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                
            };
        },
        computed: {
            userInfo: function() {
                // 通过vuex的getters方法来获取state里面的数据
                return this.$store.getters.userInfo;
            }
        },
        methods: {
            updateUserInfo() {
                // 通过vuex的actions方法调用后台接口更新state里面的数据
                this.$store.dispatch('getUserInfoData');
            },
            setUserInfo() {
                // 通过vuex的mutations方法来设置state里面的数据
                this.$store.commit('setUserInfo','testUser');
            }
        }
    }
</script>
<style scoped></style>

至此，vuex的基本应用就总结完毕了，后期会更新更加完整的vuex方面的技术知识。
学会下一次进步，是做大自己的有效法则。