（四）vue vuex——状态管理

Vuex的作用

解决多组件之间同一状态的数据共享；

解决数据持久化问题。

 

安装

cnpm install vuex --save

 

定义

// src下新建vuex目录，再在vuex目录下，新建store.js

// store.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 1、存储数据，主要用于数据共享和持久化的存储
var state = {
    count: 1,
    list: []
}

// 2、修改state数据的地方
var mutations = {
    incCount() {
        ++state.count;
    }
}

// 3、当state改变的时候，通过getters中的方法返回重新计算后的state的值，实际上并没有什么用处
var getters = {
    computedCount: (state) => {
        return state * 2
    }
}

// 4、调用mutations的地方，起到间接修改state的作用，可以进行异步请求的地方，跟getters一样，并没有什么作用
var actions = {
    incMutationsCount(context) {
        context.commit('incCount');
    }
}

var store = new Vuex({
    state,
    mutations,
    getters,
    actions
})

export default store

 

使用

// Home.vue：

<template>

    <div id="home">
        
    {{msg}}--{{this.$store.state.count}}---{{this.$store.getters.computedCount}}

    <br>

    <button @click="incCount()">增加</button>

    <br>

    <ul>
        <li v-for="(item, key) in list" :key="key">
            {{item}}
        </li>
    </ul>

    </div>

</template>

<script>

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

    export default {
        name: 'app',
        data () {
            return {
                msg: '我是首页',
                list: []
            }
        },
        store,
        method: {
            incCount() {
                this.$store.commit('incCount')
            },
            requestData() {
                // 这里假设请求的api地址返回值中，data是一个数组
                let api = "";
                // 这里用的是vue-resource请求数据
                this.$http.get(api).then(response => {
                    
                    console.log(response)
                    this.list = response.data

                    this.$store.state.list = response.data

                }, err => {    
                    console.log(err)
                })
            }
        },
        mounted() {
            var stateList = this.$store.state.list
            if (stateList.length > 0) {
                this.list = stateList 
            } else {
                this.requestData()
            }
        }
    }

</script>