Vuex 入门讲解

一、vuex简介

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

二、状态管理模式

状态管理： 将多个组件需要共享的变量统一存储在一个对象中,然后将此对象放在顶层的Vue对象,这样，所有的组件均可共享此对象中的值。

1、单页面状态管理

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

代码：

• state(状态)：存在Vue实例中的data中
• view(视图)：用于展示数据
• action(行为)：可添加相应的事件来改变状态的值

2、多界面状态管理

• State(状态)：存储需要共享的值

• vue component(组件)：将值提供给组件进行展示

• action(事件)：组件需要修改状态中的值时,需要[发布]行为

• mutation(变更)：将事件[提交]至mutation,进行对状态的改变

  注：
  1.devtools：vue官方提供的插件，用于记录状态的更新【但是必须通过mutation进行修改】
  
  2.backend(后端)：需请求后端API时,需要在action中完成
  

三、Vuex 使用

1、安装

1. 在项目中通过指令进行安装Vuex:

npm install vuex --save

2. 在项目的src文件夹中创建文件夹（store），并在文件夹在创建（index.js）
   
3. index.js

   // 1、导入vue 和 vuex
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   // 2、使用插件（use）
   Vue.use(Vuex)
   
   // 3、创建Vuex对象
   const store = new Vuex.Store({})
   
   // 4、导出
   export default store;
   

4. main.js

   import Vue from 'vue'
   import App from './App.vue'
   import store from './store/index.js'
   
   Vue.config.productionTip = false
   
   new Vue({
     store, // 挂载到Vue对象中
     render: h => h(App),
   }).$mount('#app')