Vue.js学习与入门（九）Vuex状态管理

为了能让其他组件共享这些数据和方法，可以通过Vuex来统一管理组件状态。

首先需要安卓Vuex，在命令端口中，切换到你的Vue项目的路径，然后输入以下命令进行安装。

    npm install --save vuex

在src目录下，新建一个store目录，并在这个目录下创建一个store.js文件，示例文件内容如下：

import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    //存放数据
    state:{
        count:0,
    },
    //存放方法
    mutations:{
        //增加count的值的方法
        increment(state){//上面定义的state对象
            state.count++
        },
        //减少count的值的方法
        decrement(state){//上面定义的state对象
            state.count--
        }
    }
});

export default store;

在main.js文件中添加，修改相应的代码：

//引入store
import store from "./store/store"

new Vue({
    el: '#app',
    store:store,//引用路由实例store，对应上方import（import store from "./store/store"）
    render(h) {
        return h(App);
    }
});

在需要显示的组件中，可以通过this.$store.commit方法调用Vuex的mutations选项中定义的方法。例如在App.vue组件中的<template>中添加代码：

<button @click="sub">-</button>
<!-- 使用Vuex中的数据 -->
{{$store.state.count}}
<button @click="add">+</button>

然后再<script>部分添加methods选项，并且在选项中添加一个add和sub方法，调用Vuex的mutations选项中定义的increment方法和decrement方法：

<script>
    export default {
        name: 'app',
        methods:{
            add(){
                //调用store实例中的方法
                this.$store.commit('increment');
            },
            sub(){
                //调用store实例中的方法
                this.$store.commit('decrement');
            }
        }
    }
</script>

关于Vuex更多写法请参照https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc