学习视频:Vuex从入门到实战
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享。
- 能够在vuex中集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享,提高开发效率
- 存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
-
安装vuex依赖包
npm i vuex --save
-
导入vuex包
import Vuex from 'vuex' Vue.use(Vuex)
-
创建store对象
const store = new Vuex.Store({ // state 中存放的就是全局共享的数据 state: {count: 0} })
-
将store对象挂载到vue实例中
new Vue({ el: '#app', render: h => h(app), router, // 将创建的共享数据对象,挂载到Vue实例中 // 所有的组件,就可以直接从store中获取全局的数据了 store })
State 提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中存储。
// 创建store数据源,提供唯一公共数据
const store = new Vuex.Store({
state: { counte: 0 }
})
访问方式
-
this.$store.state.全局数据名称
-
// 1.从vuex中按需导入mapState函数 import { mapState } from 'vuex' // 2.将全局数据,映射为当前组件的计算属性 computed: { ...mapState(['count']) }
Mutation 用于变更 Store 中的数据。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
add (state) {
state.count++
},
addN (state, step) {
// 变更状态
state.count += step
}
}
})
触发mutation方法
-
// 利用commit进行触发 methods: { addN () { this.$store.commit('addN', 5) } }
-
// 1.从vuex中按需导入 mapMutations 函数 import { mapMutations } from 'vuex' // 2. 将指定的mutations函数,映射为当前组件的methods函数 methods: { ...mapMutations(['add', 'addN']) }
Action用于处理异步任务,需要通过mutation的方式间接变更数据。
const store = new Vuex.Store({
// ...省略
mutations: {
add (state) {
state.count++
}
},
actions: {
addAsync (context) {
setTimeout(() => {
context.commit('add')
}, 1000)
}
}
})
触发方法
-
// 利用dispatch触发 methods: { handle () { this.$store.dispatch('addAsync') } }
-
// 1.从vuex中按需导入 mapMutations 函数 import { mapActions } from 'vuex' // 2. 将指定的actions函数,映射为当前组件的methods函数 methods: { ...mapActions(['addAsync']) }
Getter 用于对Store中的数据进行加工处理形成新的数据,类似于Vue的计算属性。
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
showNum (state) {
return '当前最新的数量是' + state.count
}
}
})
调用方法
-
this.$store.getters.showNum
-
// 1.从vuex中按需导入mapState函数 import { mapGetters } from 'vuex' // 2.将全局数据,映射为当前组件的计算属性 computed: { ...mapGetters(['showNum']) }
为了避免臃肿,将store分割成模块(module)。每个模块有自己的state、mutation、action、getter、甚至是嵌套子模块。
module模块文件:
/* file: moduleA.js */
const state = {
number: 1
}
const mutations = {
addOne (state) {
state.number++
}
}
const actions = {
// state: 当前模块的state, rootState: 根的state
addRoot ({ state, commit, rootState }) {
rootState.count++
}
}
const getters = {
showNum (state, getters, rootState, rootGetters) {
console.log(rootState, rootGetters)
return state.number + rootState.count
}
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
}
store/index.js 主文件
/* file: index.js */
import moduleA from './modules/moduleA'
const store = new Vuex.Store({
// ...省略
modules: {
moduleA
}
})
调用方法(namespaced为true的情况):
-
// state调用方法 this.$store.state.moduleA.number // getters调用方法 this.$store.getters["moduleA/showNum"] // mutations调用方法 this.$store.commit('moduleA/addOne') // actions调用方法 this.$store.dispatch('moduleA/addRoot')
-
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' methods: { ...mapMutations('moduleA', ['addOne']), ...mapActions('moduleA', ['addRoot']), } computed: { ...mapState('moduleA', { number: state => state.number }), ...mapGetters('moduleA', ['showNum']) }