Vuex介绍（状态管理模式）

常用调试：
console.log, alert()阻塞的行为, debugger断点调试

-多个视图依赖同一个状态（eg：菜单导航）
-来自不同视图的行为需要变更同一状态

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        // 要共用的状态参数
        count: 0
    },
    mutations: {
        // 定义改变的方法
        increase () {
            this.state.count ++
        },
    },
    actions: {
        
    }
})

export default new Vuex.Store({
    state: {
        lists:[]
    },
    mutations: {
        addItem(state, value){
            state.lists.push(value)
        }
    }
})
 
import store from '@/store'
export default {
    name:'Add',
    store,
    data() {
        return {
            title:'',
            content:''
        }
    },
    methods: {
        add(){
            store.commit('addItem', {
                title: this.title,
                content: this.content
            })
            this.title = ''
            this.content = ''
            this.$router.push('/home/list')
        }
    }
}
 // 动态监听list的变化(列表页面实时刷新UI)
<script>
import store from '@/store'
export default {
    name: 'List',
    store,
    computed: {
        pageLists() {
            return store.lists
        }
    }
}
</script>

 

 

Info.vue

<script>
import store from '@/store'
export default {
    name: 'Info',
    store,
    methods: {
        add (){
            console.log('add Event from info!')
            store.commit('increase') // 提交increase，修改count的值
        }
    }
}
</script>

About.vue
 

{{msg}}
<script>
import store from '@/store'
export default {
    name:'about',
    store,
    data() {
        return {
            msg: store.state.count
        }
    }
}
</script>