vuex用法总结

原理

---

概念

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

特点

集中式管理数据状态方案 (操作更简洁)
数据变化是可预测的 (响应式)

使用场景

实现多组件状态管理, 即多个组件之间需要数据共享时需要使用vuex, 比如用户的登录状态，用户名称，头像等等

实现步骤

---

安装vuex

1. 使用npm下载 : npm install vuex --save
2. 使用vue-cli构建项目时选择使用vuex

创建文件及基本结构

|--src
|----- main.js
|----- store
|----------- index.js

实例化store

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

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  }
})
export default store

向vue实例注入store

在src/main.js中，导入store，并注入Vue实例，具体如下：

import store from './store' 

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

在组件中使用

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

vuex的5个属性

---

state

作用 : 统一定义公共数据

定义语法 :

state:{
    属性名:'属性值'
}

调用语法

this.$store.state.属性名

---

mutations

作用 : 修改公共数据

定义语法 : 第一个参数必须写,代表state对象 , 第二个参数表示函数执行是要传入的数据

mutations：{
  	mutation名: function(state [, 载荷]) {
      // 代码实现
      state.变量名 = 载荷
    }
}

调用语法 :

this.$store.commit('mutation名', 载荷)

---

actions

作用 : 发送异步请求(Action 提交的是 mutation，而不是直接变更状态)

定义语法 : 第一个参数context代表store实例对象,具有store的方法

actions: {
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      // 2. 调用mutation来修改/保存数据
      context.commit('mutation名', 载荷)
    }
}

调用语法 :

this.$store.dispatch('actions的名字', 载荷)

---

getters

作用 : 在state中的数据的基础上，进一步对数据进行加工得到新数据(类似于计算属性)

定义语法 :

getters: {
    getter的名字 : function(state) {
      return 要返回的值
    }
}

调用语法 :

this.$store.getters.getter的名字

---

modules

作用 : 模块拆分

定义语法 :

modules: {
  	模块名： {
      	namespaced: true,     // 这个为true，则在使用mutations时，就必须要加上模块名
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	}
}

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

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

调用语法 :

$store.state.模块名.数据项名          //调用state
$store.getters['模块名/getters名']    //调用getters
$store.commit('mutations名')          // namespaced为false时调用mutations
$store.commit('模块名/mutations名')   // namespaced为true时调用mutations
$store.dispatch('actions名')          // namespaced为false时调用actions
$store.dispatch('模块名/actions名')   // namespaced为true时调用actions

流程图

---