一、Vuex 简介

Vuex 是 Vue.js 的状态管理模式，它为 Vue 应用提供了一个集中存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、严格模式概述

Vuex 的严格模式是一种额外的开发辅助工具，可以帮助开发者在开发过程中发现直接修改 Vuex 状态的行为。当严格模式被启用时，任何尝试直接修改 Vuex 状态的操作都会抛出错误。

三、启用严格模式

要在 Vuex 中启用严格模式，只需在创建 Vuex store 时，将 `strict` 选项设置为 `true`。以下是一个示例：


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

Vue.use(Vuex);

const store = new Vuex.Store({
    strict: true, // 启用严格模式
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        increment({ commit }) {
            commit('increment');
        }
    }
});

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

四、案例讲解

让我们通过一个完整的案例来演示如何在 Vue 应用中使用严格模式下的 Vuex：

1. 安装 Vue 和 Vuex

首先，确保你的项目已经安装了 Vue 和 Vuex。如果还没有安装，可以使用 npm 或 yarn 进行安装：


npm install vue vuex --save

2. 创建 Vuex Store

创建一个名为 `store.js` 的文件，并配置 Vuex store 以及启用严格模式：


// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    strict: true,
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    actions: {
        increment({ commit }) {
            commit('increment');
        },
        decrement({ commit }) {
            commit('decrement');
        }
    }
});

export default store;

3. 创建 Vue 应用并使用 Store

在你的 Vue 应用入口文件中（通常是 `main.js`），引入并使用之前创建的 Vuex store：


// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

4. 编写组件

编写一个简单的组件来演示 Vuex 的状态管理：




    
        计数器: {{ count }}
        
        
    



export default {
    computed: {
        count() {
            return this.$store.state.count;
        }
    },
    methods: {
        increment() {
            this.$store.dispatch('increment');
        },
        decrement() {
            this.$store.dispatch('decrement');
        }
    }
};




    
        
    



import Counter from './Counter.vue';

export default {
    components: {
        Counter
    }
};