vuex的武功秘籍了解一下

1. vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信

通俗的讲 vuex就是vue官方提供的独立于组件体系之外的，管理公共数据的工具 在vue2中通常使用父传子，子传父的方法传递数据，这样的话我们可以做一些小的项目，当项目做大的时候，这样写就会非常的麻烦，这时，就可以利用vuex的插件将数据放进一个不管是父组件还是子组件都可以用到的一个容器中

vue的降龙五掌

1. state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
2. mutations ： 使用它来修改数据(类似于methods)
3. getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
4. actions： 发起异步请求
5. modules： 模块拆分

在我们修炼这门武功，我们需要做一些准备工作

配置项准备

整体步骤：

1. 安装。它是一个独立的包，需要先安装。
2. 配置 a. 创建Vuex.store实例 b. 向Vue实例注入store
3. 使用。在组件中使用store

1.安装包

进入项目目录，安装包

npm install vuex@3.6.2

开发依赖 ： npm i xxxx --save-dev ; npm i xxxx -D ; 生产依赖： npm i xxxx --save ; npm i xxxx -S; npm i xxxx

2.创建文件夹

跟路由的操作基本也一样,创建一个文件夹

根组件
└── src
    ├── main.js
    ├── router
    │   └── index.js   # 路由
    └── store
        └── index.js   # vuex

在store/index.js 中放置具体的代码，具体如下：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state(){
    return {
      // 就是公共的数据，所有的组件都可以直接使用
      count: 100
    }
  }
})
export default store

3.向Vue实例注入store

在src/main.js中：

1. 导入store
2. 并注入Vue实例

// 省略其他
// 1. 导入store
import store from './store' 

new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

在组件中使用store

在任意组件中，通过this.$store.state 来获取公共数据

第一掌！！！(state)

他在直接在我们创建的配置文件index.js中的const store = new Vuex.Store下操作

state的作用与组件中的data的作用是一致的 都是用来存取数据的

new Vuex.store({
  state() {
    return {
       属性名： 属性值 
    }
  }
})

使用方法:

• 在组件中，通过this.$store.state.属性名来访问
• 在模板字符串直接访问，则可以省略this而直接写成： {{$store.state.属性名}}

第二掌！！！ (用mutations修改公共数据)

作用是：通过调用mutations来修改定义在state中的公共数据。

它跟组件中的methods的用法是一样的，都是修改数据的

分两个格式： 定义格式，调用格式

定义格式：

new Vue.store({
  // 省略其他...
  mutations：{
    // 每一项都是一个函数，可以声明两个形参
  	mutation名1：function(state , 数据) {
  
    },
    mutation名2：function(state , 数据) {
  
    }
	}
})

● 第一个参数是必须的，表示当前的state。在使用时不需要传入 ● 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

调用格式：

this.$store.commit('mutation名', 实参)

运行流程图如下： 原理图如下：

第三掌 ！！！ （用getters的派生状态）

作用：在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

定义格式

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

state 就是上边定义的公共数据state

使用格式

在组件中通过：$store.getters.getter的名字 来访问

前三掌小结一下:

第四掌 !!!!!(Vuex-actions-发异步请求)

actions介绍

● actions是vuex的一个配置项

● 作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部

● 要点： ○ action 内部可以发异步请求操作

○ action是间接修改state的：是通过调用 mutation来修改state

定义格式:

 new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

调用格式

在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

示例 修改上面例子中的发请求图书的代码，将axios的部分写到action中 

// 发ajax请求，从后端获取数据，再来去修改state中的数据

    actions: {

      getBooks (context) {

        // 1. 发异步请求

        axios({

          url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',

          method: 'GET'

        }).then(res => {

          console.log(res)

          // 2. 调用mutation

          context.commit('setBooks', res.data.data)

        })

      }

    },

第五掌 !!!!!(用modules来拆分复杂业务)

第五掌就是前面四掌的集合.

modules的作用 : 拆分模块，把复杂的场景按模块来拆开 格式

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	模块名1： {
    		// namespaced为true，则在使用mutations时，就必须要加上模块名
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	}，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
         modules: {}
  	}  
  }
})

也可以更进一步对文件进行拆分。

|--store /
|------- index.js # 引入模块
|------- modules
|-------------- / mod1.js # 模块1
|-------------- / mod2.js # 模块2

调用模块中 state, mutation,getters, actions方法

getters : this.$store.getters['模块1/g名字']

state: this.$store.state.模块1.数据名字

mutation: this.$store.commit('模块1/m名字 , 参数)

action: this.$store.dispatch('模块1/a名字' , 参数)

总结原理图