【vuex】

在这里插入图片描述

资料

尚硅谷视频:https://www.bilibili.com/video/BV1Zy4y1K7SH?p=108
官网:https://v3.vuex.vuejs.org/zh/

安装

注意:vue的版本要和vuex的版本差一个版本,也就是:

  • vue2要用vuex3
  • vue3要用vuex4

先看一下自己使用的vue的版本:打开项目的package.json文件,看到目前用的vue2,因此,要安装vuex3
在这里插入图片描述
安装vuex3的命令;其他版本,替换下面命令中的3

npm install vuex@3

使用

快速开始

新建store 目录,和App.vue平级:
在这里插入图片描述
在store目录下新建index.js文件,内容如下:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //类似vue中的data,时k-v键值对,如:
    //name:""
  },
  actions:{
  	//函数名一般使用驼峰命名法
  	//可以收到两个个参数:上下文信息、传的参数;一般调用commit在mutations中处理state中的数据,如:
  	//updateName(context, val) {
    //  context.commit('UPDATE_NAME')
    //}
  },
  mutations: {
	//一般使用大写字母命名
	//可以收到两个参数,state、传的参数;用于处理state中的数据,如:
	//UPDATE_NAME(state, val) {
    //  state.name = val
    //}
  },
  getters: {
    //类似vue的computed
	//可以收到两个参数:state、整个getters
	//getNameLength(state, getters) {
	//  return state.name.length;
	//}
  }
})

main.js中引入刚刚创建的文件:(./store/index可简写为./store)
在这里插入图片描述

基本使用(非模块化):

例子:

例如,我们使用如下内容,替换/store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sum: 0
  },
  actions:{
  	add(context,val){
    	context.commit("ADD",val)
    }
  },
  mutations: {
    ADD(state,val){
        state.sum += val;
    },
})

并在某个模块(记为A模块)的methods中使用:

methods:{
  add(){
    this.$store.dispatch("add",this.optionVal)
  }
}

具体工作流程:
在这里插入图片描述
当然,如果逻辑比较简单,也可以在模块的方法中直接调用mutation中的方法,此时,需要调用$store.commit方法。
例如上面的例子,A模块中的放可以写成:

this.$store.commit("ADD",this.optionVal)

辅助函数

导入

前提:需要引入对应函数:(用哪个引入哪个)

import {mapState, mapGetters, mapActions, mapMutations} from "vuex";
参数

mapXxx的参数一般有两种:

  • 对象,大致对应关系是:(后面的是字符串,不能简写)适用于要重命名的时候
    在这里插入图片描述
  • 数组,此时表示上述对象的key和value相同:(注意单引号。)
    在这里插入图片描述
mapState

下图三个方法的效果等价:
在这里插入图片描述

mapGetters

下图三个方法的效果等价:

 // bigSum(){
 //     return this.$store.getters.bigSum
 // },

 // ...mapGetters(['bigSum']),

 ...mapGetters({
     bigSum:"bigSum"
 }),
mapMutations

下图三个方法的效果等价:

// ADD(){
//     this.$store.commit("ADD",this.optionVal)
// },

// ...mapMutations(["ADD"]),

...mapMutations({ADD:"ADD"}),
mapActions

下图三个方法的效果等价:

// addIfOdd(){
//     this.$store.dispatch("addIfOdd",this.optionVal)
// },

//...mapActions(['addIfOdd']),

...mapActions({
    addIfOdd:'addIfOdd',
}),

模块化:

步骤:

修改store/index.js:
在这里插入图片描述
修改mapXxx辅助函数:

  • 第一个参数为命名空间,就是这个:
    在这里插入图片描述

  • 第二个参数和本文使用 > 基本使用 > 辅助函数 的第一个参数一致。

例子:
在这里插入图片描述

大致执行流程:
在这里插入图片描述

### Vuex 的核心概念与使用方法 Vuex 是专门为 Vue.js 设计的一个状态管理模式,用于集中管理应用中的状态。通过 Vuex,可以更方便地处理组件间的全局状态以及复杂的组件间通信。 #### 1. 安装与初始化 在项目中引入 Vuex 需要先安装依赖包 `vuex` 并将其注册为 Vue 插件[^1]: ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0, }, mutations: {}, actions: {}, getters: {} }); export default store; ``` #### 2. 创建简单的 Vuex Store 创建一个基本的 Vuex Store 可以定义四个主要部分:`state`, `mutations`, `actions`, 和 `getters`[^1]。下面是一个完整的简单示例: ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { // 存储数据的地方 count: 0, }, mutations: { // 同步修改 state 的唯一方式 increment(state) { state.count++; } }, actions: { // 提交 mutation 的地方,支持异步操作 incrementAsync({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } }, getters: { // 访问经过计算后的 state 数据 doubleCount(state) { return state.count * 2; } } }); ``` #### 3. 模块化组织状态 对于较大的应用程序,推荐将 Vuex Store 划分为模块来提高可维护性和清晰度[^2]。每个模块都可以拥有自己的 `state`, `mutations`, `actions`, 和 `getters`: ```javascript // store/modules/exampleModule.js const exampleModule = { namespaced: true, // 开启命名空间 state() { return { text: 'Hello Vuex Module', }; }, mutations: { updateText(state, newText) { state.text = newText; } }, actions: { changeText({ commit }, payload) { commit('updateText', payload); } }, getters: { getText(state) { return state.text.toUpperCase(); } } }; export default exampleModule; // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; import exampleModule from './modules/exampleModule'; Vue.use(Vuex); export default new Vuex.Store({ modules: { example: exampleModule } }); ``` #### 4. 状态持久化 为了防止页面刷新丢失状态,可以通过插件 `vuex-persistedstate` 将 Vuex 中的状态保存到浏览器的本地存储中[^3]: ```bash npm install vuex-persistedstate ``` 配置如下所示: ```javascript // store/index.js import createPersistedState from 'vuex-persistedstate'; import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { user: null, }, plugins: [ createPersistedState() ] }); ``` #### 5. Vuex 常见问题解答 - **何时应该使用 Vuex?** 当存在多组件共享状态、组件间通信复杂或者需要多个视图监听同一状态变化时,建议采用 Vuex 来统一管理和分发这些状态[^3]。 - **如何与 Vue Router 结合使用?** 可以在路由守卫中调用 Vuex 的 action 方法完成权限校验或其他逻辑处理[^3]: ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !store.getters.isAuthenticated) { next('/login'); // 如果未登录则跳转至登录页 } else { next(); // 继续导航 } }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值