大白话教你一次性搞懂vuex

我彦祖不会秃
137 阅读3分钟

Vuex是什么

Vuex是一个转为Vue.js应用程序开发的状态管理模式,采用集中式储存管理应用的所有组件的状态,解决多组件数据通信.
特点:
vue官方提供的独立于组件体系之外的，管理公共数据的工具,如图所示:

111.png

使用场景

大型项目

Vuex中五个重要内容

1.state : 统一定义公共数据(类似于data)
2.mutations : 使用它来修改数据(类似于methods)
3.getters : 对现有状态进行计算得到新的数据(类似于计算属性)
4.actions : 发送异步请求
5.modules : 模块拆分
关系如图所示 :

222.png

使用Vuex

两种情况 :

1.在老项目中使用.先额外安装Vuex包,再配置
2.在新项目中使用.在配置vue-cli中创建项目时,就可以直接选中vuex项.

在老项目中

1.安装Vuex包
npm i vuex@3.6.2
开发依赖:npm i xxxx --save-dev; npm i xxx -D
生产依赖:npm i xxxx --save ;   npm i xxxx -S;     npm i xxxx

2.配置
a.创建Vuex.store实例
b.向Vue实例注入store
3.使用.在组件中使用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

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

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

在组件中使用store

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

五大内容

state

作用 : 用来保存公共数据 格式 :

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

使用 :
在组件中 :this.store.state.属性名
在模板中 :{{store.state.属性名}} 可省略this

小结

state的作用是 : 保存公共数据
state是响应式 : 如果修改了数据,相应的在视图上的值也会改变

mutations

作用 : 修改定义在state中的公共数据.
格式 : 定义格式,使用格式
定义格式 :

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

使用格式 :
this.store.commit('mutations名',实参)

小结

1.mutations在Vuex中用来修改公共数据的唯一入口
2.定义时,第一个参数state是固定的,第二个是载荷
3.在调用时,用this.store.commit('mutations名',载荷)来调用

getters

作用 : 在state中的数据基础上,进一步对数据进行加工得到新数据(与computed一样)
格式 : 定义格式,使用格式
定义格式 :

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

使用格式 :
在组件中通过,$store.getters.gette名字 来访问

Vuex-state-mutations-getters 小结

1.定义数据
2.提供 获取/修改 数据的方法

333.png

actions

作用 : 发异步请求获取数据,调用mutations来保存数据,将整个ajax操作封装在Vuex的内部.
格式 : 定义格式,调用格式
定义格式 :

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

小结

actions一般用来发异步请求,数据回来以后,再去调用mutations来保存数据.

111.png
将ajax请求放在actions中有两个好处：

  1. 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
  2. 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。

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: {}
  	}  
  }
})

访问数据和修改数据的调整

1.访问模板中的数据,要加上模块名

获取数据项：  {{$store.state.模块名.数据项名}}
获取getters： {{$store.getters['模块名/getters名']}}

2.访问模块中的mutations / actions

  • 2.1如果namespaced为true,则需要额外去补充模块名
  • 2.2如果namespaced为false，则不需要额外补充模块名
$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true

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

小结

使用了modules之后,在访问数据时就要额外添加modules的名字了.
结论 : 在使用modules,建议都给加上namespaced

avatar
文章
阅读
粉丝