Vuex的使用方法及它的优缺点

vuex是一个专门为vue.js设计的集中式状态管理架构。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。。

由于vuex中的state存放的数据在页面刷新时会丢失，vuex只能用于单个页面中不同组件（例如兄弟组件）的数据流通

使用场景：vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会更便捷

Vuex 的使用方法：

安装 Vuex

如果你使用 npm 或 yarn，可以通过以下命令安装 Vuex：

npm install vuex --save

# 或者

yarn add vuex

创建 Store

创建一个 store.js 文件，并引入 Vuex，并调用 Vue.use(Vuex) 来启动 Vuex：

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({

state: {

// 定义状态

},

mutations: {

// 定义改变状态的方法

},

actions: {

// 定义响应动作的方法

},

getters: {

// 定义获取状态信息的方法

},

modules: {

// 定义模块

}

});

export default store;

引入 Store

在你的主 Vue 实例中引入 store：

import Vue from 'vue';

import App from './App.vue';

import store from './store';

new Vue({

el: '#app',

store,

render: h => h(App)

});

在组件中使用

你可以在组件中通过 this.$store 访问 Vuex Store：

computed: {

count() {

return this.$store.state.count;

}

},

methods: {

increment() {

this.$store.commit('increment');

}

}

Vuex 的优点：

集中式管理：Vuex 允许将应用的状态集中到一个地方管理，方便跟踪和调试。

可预测性：通过规范的方式改变状态（mutations），状态的变化可预测且可追溯。

插件：Vuex 允许通过插件扩展，例如开发工具支持、日志记录等。

组件解耦：组件不需要通过 props 一层层传递状态，可以直接从 Vuex 获取。

Vuex 的缺点：

学习曲线：对于小项目或初学者来说，Vuex 的概念和引入的复杂性可能是一个学习负担。

过度使用：在小型项目或简单的状态管理场景中使用 Vuex 可能会导致不必要的复杂性和开销。

仅限于 Vue：Vuex 仅能在 Vue.js 中使用，有一定的局限性。

总而言之，Vuex 是一个强大的状态管理工具，适用于大型或中型的 Vue.js 应用，它可以帮助你更好地组织和管理应用状态。对于小型项目，可能需要评估其带来的收益是否足够弥补它带来的额外复杂性。