Vue — Vuex组件的状态管理
最后更新于：2022-04-02 08:09:36
[TOC]
>[success] # 为什么要使用vuex
~~~
1.组件之间传值的方式有很多，可以通过各种办法进行父传子，子传父，
兄弟组件和非相关组件的传值通信，但是会出现一个问题如果多个组件之间
要共享状态(数据)多个组件之 间互相传值很难跟踪数据的变化，如果出现问
题很难定位问题
2.因此vuex 就诞生了'把组件的共享状态抽取出来，以一个全局单例模式管理'
3.vuex作用是进行状态管理，解决复杂组件通信，数据共享
~~~
>[success] # Vuex -- 组件的状态管理
* vuex 官方的图解
~~~
1.简单的解释'vue components' 去派发'Action',完成api的异步响应，将数据给到'Mations',在来改变vuex
中数据的stat，从而在触发视图的更新，可以看到这个过程是单项的。
~~~
>[info] ## Vuex -- 是什么
~~~
1.官方文档的解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用
集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测
的方式发生变化
2.我的解释: 就是组件之间的通信，简单的说如果没有使用$bus这种形式，两个
组件的通信必须经过父组件做桥梁传递，如果使用'bus' 需要在创建一个Vue实
例，对于小型项目这样解决已经可以，但大型项目需要更加细分的拆分，这时候
需要Vuex
3.在下面的使用中我们可以看到，我们将Vuex 整个创建的实例挂载到了main.js
中的根vue实例中，这样所有组件都可以共享这个vuex
~~~
>[info] ## Vuex -- 安装和使用
>[danger] ##### 页面引入的安装方法
~~~
1.先引入vue 在引入vuex
~~~
~~~
~~~
>[danger] ##### npm 安装的方法
~~~
npm install vuex --save
~~~
>[danger] ##### 在webpack 或者cli 中使用
* 在创建的'store' 文件夹下的'index.js' 文件中做如下配置
~~~
1.第一步导入vuex
2.第二步创建引入Vuex
3.第三步创建一个new Vuex.Store 实例
~~~
~~~
import Vue from 'vue'
import Vuex from 'vuex' // 第一步
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import user from './module/user'
Vue.use(Vuex); // 第二步
// 第三步
export default new Vuex.Store({
state,
mutations,
actions,
getters,
modules:{
user
}
})
~~~
* 在main.js 文件中挂载到根vue实例中
~~~
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');
~~~
>[danger] ##### vuex 是不是必备的
~~~
1.vuex 官网也给了相应的意见如果您不打算开发大型单页应用，使用 Vuex
可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用
Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个
中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex
将会成为自然而然的选择。
~~~
[关于store ](https://cn.vuejs.org/v2/guide/state-management.html#%E7%AE%80%E5%8D%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E8%B5%B7%E6%AD%A5%E4%BD%BF%E7%94%A8)
';