Vuex是怎样进行状态管理的

export default new Vuex.Store({
// 一开始就定义在state里面的数据,就会自动变成响应式
//如何添加数据到响应式系统
// Vue.set(添加到哪里,添加数据的类型key:(string|number),value:数据的值)
//如何响应式的删除state里面的数据
//Vue.delete(删除哪里,删除的key)
state: {
    counter: 1000,
    //比如还可以管理数组
    students: [
    {id: 110, name: 'yan', age: 18},
    {id: 111, name: 'wang', age: 10},
    {id: 112, name: 'zhao', age: 25},
    {id: 113, name: 'li', age: 36}
    ]
},
mutations: {
    //所有的修改都通过mutations提交
    increment(state) {
    state.counter++
    },
    decrement(state) {
    state.counter--
    },
    incrementCount(state, count) {
    state.counter += count
    },
    addstudent(state, stu) {
    state.students.push(stu)
    }
},
actions: {
},
modules: {
},
getters: {
    powerCounter(state) {
    return state.counter * state.counter //就算属性有缓存
    },
    more20stu(state) {
    return state.students.filter(s => s.age > 20)
    },
    more20stulength(state,getters) {
    return getters.more20stu.length
    },
    moreAgestu(state) {
    return function(age) {
        return state.students.filter(s => s.age > age)
    }
    }
}
})

## App.vue ##

    <template>
<div id="app">
    <h2>-------app内容--------</h2>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <!-- 这里我们只定义一个方法,传入不同的值 -->
    <button @click="addCount(5)">+5</button>     
    <button @click="addCount(10)">+10</button>

    <!-- 也可以传入一个对象 -->

    <button @click="addStudent">点击添加学生</button>

    <h2>-------hellovuex内容--------</h2>
    <Hello-Vuex/>


    <h2>-------getters的使用--------</h2>
    <h2>{{$store.getters.powerCounter}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stulength}}</h2>
    <h2>{{$store.getters.moreAgestu(25)}}</h2>


    <!-- <Hello-Vuex :counter="counter"/>  以前的想显示的方法 -->
</div>
</template>



<script>
import HelloVuex from './components/HelloVuex'
export default {
name: 'App',
components: {
    HelloVuex
},
data() {
    return {
    message: '我是app组件',
    }
},
computed: {
    more20stu() {
    return this.$store.state.students.filter(s => {
        return s.age > 20
    })
    }
},
methods: {
    addition() {
    this.$store.commit('increment')
    },
    subtraction() {
    this.$store.commit('decrement')
    },
    addCount(count) {
    this.$store.commit('incrementCount', count)
    },
    addStudent() {
    const stu = {id: 1004, name: 'zhou', age: 40}
    this.$store.commit('addstudent', stu)
    }
    //上面的this是一种普通的提交风格
    //另一种提交风格
    // this.$store.commit({
    //   tyoe: increment
    //   //这里跟挂载的数据也就是payload
    //   count
    //})
}


}
</script>

## main.js ##

    import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

## componentd/HelloVuex.vue ##

    <template>
<div>
    <h2>{{$store.state.counter}}</h2>

    <h2>{{$store.getters.powerCounter}}</h2>

    <h2>{{$store.getters.more20stu}}</h2>
</div>
</template>

<script>
export default {
    name: 'HelloVuex',
    //以前的方法,想要在app里显示子组价的counter,按如下定义
    // props: {
    //     counter: Number
    // }
}
</script>