7.Vuex

当我们的应用遇到多个组件共享状态时，会需要：多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

Vuex解决了多个组件之间同一状态的共享问题。它采用集中式存储管理应用的所有组件的状态。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。使用 localStorage或 sessionStorage。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
1.Vuex解决了组件之间同一状态的共享问题 （解决了不同组件之间的数据共享）
2.组件里面数据的持久化。

vuex的使用：

1、src目录下面新建一个vuex的文件夹
2、vuex 文件夹里面新建一个store.js
3、安装vuex

cnpm install vuex --save

4、在刚才创建的store.js引入vue

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

• 定义数据

/*1.state在vuex中用于存储数据*/
var state={
    count:1
}

• 定义方法

mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations={
    incCount(){
        ++state.count;
    }
}

• getters

优点类似计算属性,改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)

var getters= {
    computedCount: (state) => {
        return state.count*2;
    }
}

• action

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

var actions= {
    incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/
        context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/
    }
}

5、暴露

const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

export default store;

6、组建里面使用vuex

• 引入 store

 import store from '../vuex/store.js';

• 注册

 export default{
                data(){
                    return {               
                       msg:'我是一个home组件',
                    value1: null,
                     
                    }
                },
                store,
                methods:{
                    incCount(){
                      
                    this.$store.commit('incCount');   /*触发 state里面的数据*/
                    }

                }
                }

• 获取state里面的数据

this.$store.state.数据

• 触发 mutations 改变 state里面的数据

this.$store.commit('incCount');

• 触发 actions里面的方法

this.$store.dispatch('incCount');

• 获取 getters里面方法返回的的数据

{{this.$store.getters.computedCount}}

示例：

App.vue

<template>
    <div id="app">

        <header class="header">
            <router-link to="/page1">页面1</router-link>
            <router-link to="/page2">页面2</router-link>
        </header>

        <hr>
        <router-view></router-view>

    </div>
</template>

<script>


    export default {
        name: 'App',
        components: {}
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
//定义数据---state在vuex中用于存储数据
let state = {
    count: 1,
};
//定义方法---方法主要用于改变state里面的数据
let mutations = {
    changeCount: function () {
        state.count += 1;
    }
};
//定义getters---优点类似计算属性,改变state里面的count数据的时候会触发 getters里面的方法(前提是在该方法中使用了state中的数据)获取新的值 (基本用不到)
let getters = {
    comCount: (state) => {
        return state.count * 2;
    }
};
//定义action---Action 类似于 mutation，不同在于：
//        Action 提交的是 mutation，而不是直接变更状态。
//        Action 可以包含任意异步操作。
let actions = {
    actionCount:function(context){//因此可以调用 context.commit 提交一个 mutation.
        context.commit("changeCount");//执行 mutations里面的comCount方法改变state里面的数据.
    }
};

const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions
});
export default store;

Page1.vue

<template>
    <div id="page1">
        我是page1--{{this.$store.state.count}}--{{this.$store.getters.comCount}}
        <button @click="inCount">触发 mutations 改变 state里面的数据</button>
        <button @click="inAction">触发 actions里面的方法</button>
    </div>
</template>

<script>
    import store from '../vuex/store';

    export default {
        name: "Page1",
        methods: {
            inCount: function () {
                this.$store.commit("changeCount");
            },
            inAction: function () {
                this.$store.dispatch("actionCount");
            }
        },
        store,
    }
</script>

<style scoped>

</style>

Page2.vue

<template>
    <div id="page2">
        我是page2--{{this.$store.state.count}}
    </div>
</template>

<script>
    import store from "../vuex/store";
    export default {
        name: "Page2.vue",
        store,
    }
</script>

<style scoped>

</style>

数据持久化：

第一次加载的时候把数据缓存到vuex里面。，每次切换路由的时候从vuex里面读数据。持久化的数据在其他组件中也可以使用。

先在store.js-->state 中存放缓存数据的变量

let state = {
    list:[]
};
let mutations = {
    //注意：要往state 方法中传参第一个参数必须为state
    addList: function (state,data) {
        state.list = data;
    }
};

在Page2.vue中请求数据。

<template>
    <div id="page2">
        我是page2--{{this.$store.state.count}}
        <ul>
            <li v-for="(item,key) in list" :key="key">
                {{item.title}}
            </li>
        </ul>
    </div>
</template>

<script>
    import store from "../vuex/store";

    export default {
        name: "Page2.vue",
        data() {
            return {
                list: []
            }
        },
        methods: {
            requestData: function () {
                let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                this.$http.get(api).then((res) => {
                    this.list = res.body.result;
                    //数据放在store里面
                    this.$store.commit("addList", res.body.result);
                }, (err) => {
                    console.log(err);
                })
            }
        },
        mounted() {
            //数据持久化
            let listDate = this.$store.state.list;
            if (listDate.length > 0) {
                this.list = listDate;
            } else {
                this.requestData();
            }
        },
        store,
    }
</script>

<style scoped>

</style>