Vuex

Vue中组件之间传值若无法保存需要管理的状态值，一旦某个组件的状态值被修改，所有应用该值的地方就需要自动更新。这里的状态可以理解为data中保存的属性，是需要共享给其他组件使用的部分。也就是说将需要通向data属性使用vuex进行统一集中式管理。简单地比喻可认为Vuex就像银行卡的功能 - 存钱取钱。

安装配置

$ npm i -S vuex

import Vue from "vue";
import Vuex from "vuex";
//将Vuex注入到Vue根实例中
Vue.use(Vuex);

数据管理模式

开发应用程序时会分解出很多组件进行开发，各个组件之间在路基上或多或少都存在关系，因此组件之间的通信就成为待解决的问题。以往试图采用事件广播的方式，但随之而来的问题，随着组件不断扩展变化，事件会变得越来越复杂，越来越无法预料，以至于越来越难以调试。因此数据管理模式应运而生。

例如：A、B、C三个组件，B是A的子组件、C是B的子组件。在不引入数据管理模式之前，组件C要想获取组件A的数据就必须先由组件A传递给组件B，再由组件B传递给组件C。组件树变得复杂，这种看似严谨的父子结构也就严格的限制了数据的流动方式。

组件关系 数据管理模式

采用数据管理模式后，会将所有的数据统一交给全局store仓库管理，组件A和组件C可以直接修改store仓库中的数据，并通过mapState从store仓库中抓取所需数据到自己的数据中。组件B如果对组件A和组件C的数据毫无兴趣，则可以做到完全的解耦。

典型的状态自管理应用包含三个部分，分别是state、views、actions。

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

元素	名称	描述	范例
state	状态	驱动应用的数据源	count
view	视图	以声明方式将state映射到视图	template
actions	动作	响应在view上的用户输入导致的状态变化	increase

单向数据流

随着数据管理模式的发展和演化最后形成了单向数据流，单向数据流要求各个组件间的数据走向永远是单向的、可预期的。不能直接改变store中的状态。改变store中的状态唯一途径是显式地提交Actions。使得可以方便地跟踪每个状态的变化，从而更好地了解应用。

单向数据流

Vuex是单向数据流的最佳实践者，Vuex是一个专门为Vue.js应用程序开发的状态管理模式。Vuex的基本思想是单向数据流。

状态管理模式

仓库store

每个Vuex应用的核心是store仓库，store是一个容器，包含着应用中大部分状态state。简单来说，就是将多个组件通用的数据提取出来作为公共部分，放到一个叫做store的仓库里面进行统一管理，其后在需要使用的组件里直接从store中获取。

Vuex和单纯的全局对象有所不同

• Vuex的状态存储是响应式的，当Vuex组件从store仓库中读取状态时，如果store仓库中的状态发生变化，那么相应的组件也会随之得到高效地更新。
• 不能直接改变store仓库中的状态，改变store仓库中的状态的唯一途径是显式地commit提交mutation。使得方便地跟踪每个状态的变化，从而实现借助工具帮助更好地了解应用。

Vuex通过store选项提供了一种机制将状态从根组件注入到每个子组件中

$ vim src/store/index.js

const Vue = require("vue");
const Vuex = require("vuex");
Vue.use(Vuex);

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
    state:{

    },
    mutations:{

    },
    getters:{

    },
    actions:{

    }
});

Vuex中有默认的5种基本的对象

对象	描述
state	存储状态变量，可视为通用的data，其中的属性是响应式的，当属性发生改变时state会动态响应。
getters	对数据获取之前的再次编译，可理解为state的计算属性。可根据getter或state计算返回。
mutations	修改状态方法，是改变store中状态的执行者，只能同步操作。
actions	异步操作方法
modules	store的子模块

$ vim src/main.js

import Vue from 'vue';

import App from './App.vue';
import router from './router';
import store from "./store";// 引入状态管理 store

/*
import Vconsole  from "vconsole";
const vconsole = new Vconsole();
Vue.use(vconsole);
*/

import Ajax from "./utils/ajax";
Vue.use(Ajax);

Vue.config.productionTip = false;

new Vue({
  router,
  store,//注册store: 把 store 的实例注入所有的子组件
  render: h => h(App)
}).$mount('#app');

• 在组件中通过this.$store来使用store实例

vuex && axios

使用接口获取数据

$ vim /src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
import api from "@/utils/api";// 导入api接口

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        user:{}
    },
    getters:{
        user:state=>state.user
    },
    actions:{
        getUser(context, params){
            api.user(params).then(res=>{
                if(res.status !== 200){

                }
                const ret = res.data;
                if(ret.code !== 200){

                }
                const data = ret.data;
                context.state.user = data;
                context.commit("getUser", data);
            });
        }
    },
    mutations:{
        getUser(state, data){
            state.user = data;
        }
    },
});

个人中心组件触发接口获取数据

$ vim /src/views/User.vue

<script>
export default {
        created(){
            const id = 1;
            this.getUser(id);
        },
        computed:{
            user(){
                return this.$store.getters.user;
            }
        },
        methods:{
            getUser(params){
                this.$store.dispatch("getUser", params)
            }
        }
}
</script>

个人资料页面从store中获取数据

$ vim /src/view/Profile.vue

<script>
export default{
    computed:{
      user(){
        return this.$store.state.user;
      }
    },
}
</script>

状态state

状态state是用来存放组件之间共享的数据，跟组件中data选项类似，只不过data选项是用来存放组件的私有数据。

Vuex使用单一状态树，即使用一个对象包含了全部的应用层级状态。以便作为唯一数据源SSOT而存在。单一状态数让我们能够直接定位任意特定的状态片段，在调试过程中能够轻易地获取到整个当前引用状态的快照。

vuex中的数据源是需要保存的数据，页面中可通过 this.$store.state 获取自定义的数据。

vue cli 3中vuex默认只是用一个store.js文件代替原来的store文件夹中的三个js文件state、mutation、action以及getters用法等。