阅读 165

Vuex基本使用

读书.jpg

(图片来源于网络,如侵删)

前言

Vuex是在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。本文总结了vuex的重要知识点,花费几分钟就可了解vuex的使用。

一、搭建vuex环境

1.创建文件src/store/index.js
复制代码
import Vue from 'vue' // 导入vue
import Vuex from 'vuex' // 导入vuex

Vue.use(Vuex) // 挂载Vuex

const state = {} // 准备state对象保存数据
const mutations = {} // 准备mutations对象修改state对象
const actions = {} // 准备actions对象响应组件中的用户方法
const getters = {} // 准备getters对象加工state对象

export default new Vuex.store({ // 创建并暴露store
state,
mutation,
action
})
复制代码
2.在src/main.js文件中引入vuex
复制代码
import store from '/store' // 导入store

new Vue({ //  创建vm实例
el:'#app'render: h => h(App),
store
})    
复制代码

二、组件中读取vuex中的数据

1.在组件中读取vuex中的数据 this.$store.state.xxx
2.在组件中修改Vuex中的数据 this.$store.commit('mutations中的方法名',数据)或this.$store.dispatch('actions中的方法名',数据)
复制代码

三、四个map方法的使用

1.先在组件中按需引入
复制代码
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
复制代码
2.使用方法可见下文
复制代码

Vuex核心API总结

3.如果是模块化开发,必须在相应模块中开启命名空间
复制代码
 namespaced:true //开启命名空间
复制代码

最后

希望整理的信息对您有所帮助,如果有什么建议,欢迎在评论区留言

不足之处还请批评指教,谢谢!

文章分类
前端
文章标签