基本介绍

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

vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具
集中式管理数据状态方案 (操作更简洁)data() { return { 数据, 状态 }}
数据变化是可预测的 (响应式)

vue官方提供的独立于组件体系之外的，管理公共数据的工具

在vue项目使用vuex

1.在新项目中使用。在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）

2.在老项目中使用。先额外安装vuex包，然后在配置。

安装。它是一个独立的包，需要先安装。 npm install vuex@3.6.2
配置
- 创建Vuex.store实例
- 向Vue实例注入store
使用。在组件中使用store

实例化store

目录结构

根组件
└── 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

向Vue实例注入store

在src/main.js中

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

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

vuex五个基本概念

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

state

定义公共数据并在组件中使用
vuex用它来保存公共数据

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

使用

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

mutations

通过调用mutations来修改定义在state中的公共数据 定义格式

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

        }
    }
})

每一项都是一个函数，可以声明两个形参:
   1.第一个参数是必须的，表示当前的state。在使用时不需要传入
   2.第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

使用格式

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

getters

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

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

使用格式 在组件中通过：

$store.getters.getter的名字 来访问

actions

发异步请求获取数据，调用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

modules

拆分模块，把复杂的场景按模块来拆开

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

或

|--store 
     |------- /index.js # 引入模块
     |------- /modules
          |------------- / mod1.js # 模块1
          |------------- / mod2.js # 模块2
          
 在store中新建modules/mod1.js 并在index.js 中引入

访问模块中的mutations/actions:
- 如果namespaced为true，则需要额外去补充模块名
- 如果namespaced为false，则不需要额外补充模块名

$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true

$store.dispatch('actions名')        // namespaced为false
$store.dispatch('模块名/actions名')  // namespaced为true

vue-map函数

mapState

mapState是辅助函数，将vuex中的数据投射到组件内部；
computed:{ ...mapState() } 这里的...是对象的展开运算符，整体来看是对象的合并。

映射

// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

computed: {
   // 说明1： ...对象 是把对象展开，合并到computed
   // 说明2： mapState是一个函数 
   //  ['数据项1'， '数据项2']
   ...mapState(['xxx'])，
   ...mapState({'新名字': 'xxx'}) //辅助函数mapState对数据重命名
}

使用

this.xxx
{{xxx}}

使用全局state

直接使用： this.$store.state.xxx;

map辅助函数：
computed: { 
  // 省略其他计算属性
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}

使用modules中的state

直接使用： this.$store.state.模块名.xxx;

map辅助函数：
computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}

getters

使用全局getters

直接使用：`this.$store.getters.xxx`

map辅助函数：
computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}

使用modules中的getters

直接使用： `this.$store.getters.模块名.xxx`

map辅助函数：
computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}

mutations

使用全局mutations

直接使用：`this.$store.commit('mutation名', 参数)`

map辅助函数：
methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}

modules中的mutations

直接使用： `this.$store.commit('模块名/mutation名', 参数)`

map辅助函数：
methods: { 
  ...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})
}

actions

使用全局actions

直接使用：`this.$store.dispatch('action名', 参数)`

map辅助函数：
methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}

使用modules中的actions

直接使用： `this.$store.dispatch('模块名/action名', 参数)`

map辅助函数：
methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}

vuex总结

基本介绍

在vue项目使用vuex

vuex五个基本概念

state

mutations

getters

actions

modules

vue-map函数

mapState

getters

mutations

actions

API总结