状态管理-vuex

1、使用vuex

// 使用vuex
// 第一步：装包npm i vuex -S
 
// 第二步：
import Vuex from 'vuex'
Vue.use(Vuex)
 
// 第三步：
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        incr (state) {
            state.count++
        },
        sub (state, i) {
            state.count -= i;
        }
    }
})
 
var vm = new Vue({
    el: '#app',
    // render：将App组件渲染到el指定的div#app中（div#app中其他内容被覆盖）
    render: c => c(App),
    router,
    store // 第四步，挂载到vm
});

2、使用【$store.state.变量】获取vuex的数据；使用mutations来操作state中的数据【this.$store.commit('方法名', 参数)】

<template>
<div>
    <h1>counter组件</h1>
    <!-- 以前 -->
    <!-- <input type="text" v-model="count"/>
    <input type="button" value="加1" @click="increment"/>
    <input type="button" value="减2" @click="subtract"/>
    -->
 
    <!-- 使用vuex后 -->
    <input type="text" v-model="$store.state.count"/>
    <input type="button" value="加1" @click="increment"/>
    <input type="button" value="减1" @click="subtract"/>
 
    <h2> count = {{$store.state.count}} </h2>
</div>
</template>
 
<script>
export default {
    // 以前count变量来自本组件data区，现在从vuex中取值
    /*data() {
        return {
            //count: 1
        }
    },
    methods: {
        increment() {
            this.count++;
        },
        subtract() {
            this.count--;
        }
 
    }*/
 
    // 使用vuex后
    methods: {
        increment() {
            this.$store.commit('incr');
        },
        subtract() {
            // 第二参数：给sub方法传参；注意，只能传一个参数。
            this.$store.commit('sub', 2);
        }
    }
 
}
</script>
 
<style></style>

3、使用getters包装数据并总结vuex的使用方式