Vuex小记

最新推荐文章于 2024-07-25 21:13:00 发布

-祖国的花朵-

最新推荐文章于 2024-07-25 21:13:00 发布

阅读量106

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_42857986/article/details/109516654

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vuex官方传送门

什么是vuex？

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

实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

什么情况下使用vuex？

只有组件之间共享的数据，才有必要存储到vuex中；对于组件中私有的数据，储存在自身的data中即可。

比如：大型的音乐播放器的播放状态，购物车的数量，网站的登录状态等等。

使用vuex的好处是什么？vuex的优势是什么？

集中管理共享的数据（状态），易于开发和后期的维护
高效实现组件之间的数据共享，避免多层数据传递，提高开发效率
存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

开始使用，安装vuex

1.安装vuex依赖（NPM安装）

npm install vuex --save

或（Yarn安装）

yarn add vuex

2.导入并使用vuex，并创建store对象暴露出去

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
  	},
	mutations: {
	},
	actions: {
	},
	getters: {
  	}
})

export default store

3.将store对象挂在到vue实例中(main.js)

import store from './store'
// 具体路径结合实际
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

完毕，这样每一个组件都可以访问在store全局共享的数据了。

Vuex的核心概念

State: 提供唯一的公共数据源，所有共享的数据都要放State中进行储存。
Getters: 对state中的数据进行加工处理形成新的数据，仅包装数据不修改原数据
Mutations: 用于修改Store中的数据
Actions: 处理异步任务
Modules: 将store进行拆分模块化

vuex如何使用？

// Store中定义全局共享数据
....
const store = new Vuex.Store({
    // state ： 放全局共享的数据
    state: {
    	count：0
  	},
	mutations: {
	},
	actions: {
	},
	getters: {
  	}
})

读取state

⭐️读取方法①
 <!--页面直接读取-->
 <span>全局的count：{{ $store.state.count }}</span>
 <!--js中读取-->
 this.$store.state.count
 
⭐️读取方法②：使用mapState 辅助函数

第一步：
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

第二步：
// 计算属性中映射 this.count 为 store.state.count
computed: {
	...mapState(['count'])
}
<!--页面直接读取-->
<span>全局的count：{{count }}</span>
<!--js中读取-->
this.count

这样就声明和读取成功全局的共享数据了。下面来操作全局共享数据：

const store = new Vuex.Store({
     // state ： 放全局共享的数据
    state: {
        count:0, 
    },
    // mutations：修改变更store中的数据
    // 只有mutations 中定义的函数，才有权利修改state的值只能写同步，立即执行的，不要在mutations中执行异步操作
    // 可以集中监控所有的数据变化  
    mutations: {
    	// 携带参数
        addN (state, num) {
            //第一个是state本身,第二个是调用的外界的参数
            state.count += num
        },
        // 不带参
        add (state) { 
            state.count++
        }
    },
    actions: {
    },
    getters: {
    } 
})

触发mutations

⭐️触发方法①
//不带参
this.$store.commit("add")
//携带参数
this.$store.commit("addN"，3)

⭐️触发方法②：使用 mapMutations 辅助函数
// 先用vuex按需导入
import { mapMutations } from 'vuex'
// 通过导入的 mapMutations 函数，映射到当前组件的 methods 函数中
// 需要几个映射几个，不需要全部映射，我这里需要2个，我映射2个方法
methods: {
	// 将 `this.add()` 映射为 `this.$store.commit('add')`
	// 将 `this.addN(num)` 映射为 `this.$store.commit(addN,num)`
	...mapMutations(['add','addN']) 
}
// 这样就可以像调用本组件的方法一样调用使用了
// 不带参
this.add()
// 带参
this.add(5)

敲黑板注意：想要修改store的state的值，必须通过 mutations 中定义的函数去修改更新。vuex 中不允许组件使用 this.$store.state.count 直接修改 state 中的值。可以集中监控所有的数据变化，方便后期维护。

以上是同步操作state数据的方法，有的时候我们需要异步操作：

const store = new Vuex.Store({
     // state ： 放全局共享的数据
    state: {
        count:0, 
    },
    // mutations：修改变更store中的数据
    // 只有mutations 中定义的函数，才有权利修改state的值只能写同步，立即执行的，不要在mutations中执行异步操作
    // 可以集中监控所有的数据变化  
    mutations: {
    	// 携带参数
        addN (state, num) {
            //第一个是state本身,第二个是调用的外界的参数
            state.count += num
        },
        // 不带参
        add (state) { 
            state.count++
        }
    },
    // actions： 可以包含任意异步操作，如何需要异步变更state中的值，需要提交的是 mutation，而不是直接变更状态
    actions: {
    	 addAsync (context) {
            // context: 相当于new 出来的vuex.store实例对象
            setTimeout(() => { 
               // 不能直接修改state 如果想要修改，必须通过context.commit('函数名') 调用mutations 中的函数
                context.commit('add')
            },2000)
        },
        addNAsync (context,num) {
            setTimeout(() => { 
                context.commit('addN',num)
            },2000)
        }
    },
    getters: {
    } 
})

触发actions

⭐️触发方法①
//不带参
this.$store.dispatch("addAsync")
//携带参数
this.$store.dispatch("addNAsync"，5)

⭐️触发方法②：使用 mapActions 辅助函数
// 先用vuex按需导入
import { mapActions } from 'vuex'
// 通过导入的 mapActions 函数，映射到当前组件的 methods 函数中
// 还是和mutation一样，需要几个映射几个，不需要全部映射，我这里需要2个，我映射2个方法
methods: {
	// 将 `this.addAsync()` 映射为 `this.$store.dispatch('addAsync')`
	// 将 `this.addNAsync(num)` 映射为 `this.$store.dispatch(addNAsync,num)`
	...mapActions(['addAsync','addNAsync']) 
}
// 这样就可以像调用本组件的方法一样调用使用了
// 不带参
this.addAsync()
// 带参
this.addAsync(7)

再次注意：不能直接修改 state 如果想要修改，必须通过 context.commit('函数名') 调用mutations 中的函数

以上是异步操作state数据的方法，有的时候我们还需要state中的数据进行处理：

const store = new Vuex.Store({
     // state ： 放全局共享的数据
    state: {
        count:0, 
    },
    // mutations：修改变更store中的数据
    // 只有mutations 中定义的函数，才有权利修改state的值只能写同步，立即执行的，不要在mutations中执行异步操作
    // 可以集中监控所有的数据变化  
    mutations: {
    	// 携带参数
        addN (state, num) {
            //第一个是state本身,第二个是调用的外界的参数
            state.count += num
        },
        // 不带参
        add (state) { 
            state.count++
        }
    },
    // actions： 可以包含任意异步操作，如何需要异步变更state中的值，需要提交的是 mutation，而不是直接变更状态
    actions: {
    	 addAsync (context) {
            // context: 相当于new 出来的vuex.store实例对象
            setTimeout(() => { 
               // 不能直接修改state 如果想要修改，必须通过context.commit('函数名') 调用mutations 中的函数
                context.commit('add')
            },2000)
        },
        addNAsync (context,num) {
            setTimeout(() => { 
                context.commit('addN',num)
            },2000)
        }
    },
    // getters: 用于对store中的数据加工处理形成新的数据.(不会修改store中的原数据,只起到包装数据的作用,类似vue的计算属性,可以认为是 store 的计算属性)
    // store 中数据发生变化，getter的数据也会跟着变化的
    getters: {
    	showCount (state) { 
            return '我是通过getter包装过的-->' + state.count;
        }
    } 
})

读取getter
⭐️读取方法①
 <!--页面直接读取-->
 <span> {{ $store.getters.showCount }}</span>
 <!--js中读取-->
 this. $store.getters.showCount
 
⭐️读取方法②：使用 mapGetters 辅助函数

第一步：
// 先用vuex按需导入
import { mapGetters } from 'vuex'

第二步：
// 使用对象展开运算符将 getter 混入 computed 对象中
// 计算属性中映射 this.showCount 为 store.getters.showCount
computed: {
	...mapGetters(['showCount'])
}
<!--页面直接读取-->
<span> {{showCount}} </span>
<!--js中读取-->
this.showCount