初识vuex

Vuex:单向数据流

Vuex:单向数据流： 用户操作=> 状态变化 => 视图更新。 我们可以使用vuex来对状态进行统一管理，方便我们在不同的组件中修改状态，以及渲染。

实践Demo

Demo目的：info组件改变vuex中的状态值 about组件中读取vuex的状态值

store.js文件中

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

Vue.use(Vuex)
export default new Vuex.Store({
    state: {           //组件的状态在这里做集中的管理
        count: 0   //初始化count为0
    },
    mutations: {   //是唯一能改变vuex中状态的方法集 
        increase() {
            this.state.count++
        }
    },
    actions: {}
})

info.vue文件中(一个组件)

<template>
    <div>
        hello info component
        <button type="button" @click="add()">添加</button>
    </div>
</template>
<script>
    import store from '@/store'

    export default {
        name: 'Info',
        store,
        methods: {
            add() {
                console.log('add Event from info!')
                store.commit('increase') //关键代码 调用vuex mutations中修改count状态的方法
            }
        }
    }
</script>

about.vue文件中(另一个一个组件)

<template>
    <div>
        This is about component
        <p>{msg{}}</p>
    </div>
</template>
<script>
    import store from '@/store'

    export default {
        name: 'about',
        store,
        data() {
            return {
                msg: store.state.count //关键代码获取vuex中 state中count的值
            }
        }
    }
</script> 

vue调试工具

vue调试工具，第二项可以看到vuex中的方法调用 以及状态值的改变