Vuex快速入门

m0_663577052024-09-12 1:31

Vuex

  • 是什么

    • 复杂场景组件之间通信

    • vuex是vue的一个状态管理工具,状态就是数据

    • 大白话: vuex是一个插件,可以帮助我们管理 vue通用数据(多组件数据共享)

  • 场景

    • 某个状态在多个组件使用(个人信息)
    • 多个组件 共同维护 一份数据(购物车)

  • 优势

    • 数据集中化管理
    • 响应式

  • vuex遵循单向数据流

初始配置

  1. 安装 vuex

    • npm install vuex@next --save # 对于 Vue 3
    • npm install vuex --save # 对于 Vue2

  2. 新建vue模块

    • 新建store/index.js文件 专门存放 Vuex

  3. 创建仓库

    js 复制代码 
    // store/index.js
// 导入 Vuex，它是 Vuex 状态管理库的核心
import Vuex from 'vuex';

// 创建一个新的 Vuex.Store 实例
// 这个实例将作为全局状态管理器
export default new Vuex.Store({
  // 定义应用的状态（state）
  state: {
    // 一个名为 count 的状态，初始值为 0
    count: 0
  },

  // 定义更改状态的方法（mutations）
  mutations: {
    // increment 方法用于更新 count 状态
    // state 是 Vuex state 对象，v 是传递给 mutation 的参数
    increment(state, v) {
      // 将 count 状态更新为传入的参数 v
      state.count = v;
    }
  },

  // 定义异步提交状态更改的方法（actions）
  actions: {
    // increment 方法用于异步提交 increment mutation
    increment({ commit }) {
      // 调用之前定义的 increment mutation
      commit('increment',10);
    }
  },

  // 定义从状态派生的状态（getters）
  getters: {
    // doubleCount 方法返回 count 的两倍
    // state 是 Vuex state 对象
    doubleCount(state) {
      // 返回 count 状态的两倍
      return state.count * 2;
    }
  }
});

  4. 挂载main.js

js 复制代码 
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store/index';

// 使用 Vuex 插件
Vue.use(Vuex);

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

配置项

  • new Vuex.Store({配置项})
配置项 类型 描述
state Object 根状态对象，包含所有的状态数据
getters Object 根getter函数，允许从state派生出一些状态
mutations Object 同步函数，用于变更state中的状态数据在 ;Vue 3 中，mutations 应改为 actions 和 commit，因为 Vue 3 的 Vuex 4 中不再使用 mutations。
actions Object 异步操作或复杂逻辑的提交（调用mutation）的包裹函数
modules Object 命名空间模块对象，用于将store分割成模块
plugins Array 自定义插件数组，用于进一步处理 actions
strict Boolean 是否开启严格模式，开启后在mutation之外修改state将抛出错误
devtools Boolean / Object 是否启用 Vue Devtools 支持，可以传递选项对象
state

  • 根状态对象，包含所有的状态数据

  • 核心配置项(必要的)

  • 获取数据

    • 通过this.$store.属性名
    • 通过 import 导入 store 然后使用
js 复制代码 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件

const store = new Vuex.Store({
  state: {
    count: 1
  },
});
getters
  • 根getter函数，允许从state派生出一些状态
  • 对数据进一步,派生状态
  • 使用
    • $store.getters.filterList()
js 复制代码 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件

const store = new Vuex.Store({
  state: {
    list: [1,2,3,4,5,6,7,8,9]
  },
  getters:{
      //过滤 <= 5 的数据
     filterList(state){
         return state.list.filter(item=> item > 5)
     }
  }
});
mutations/actions

  • 用于变更state中的状态数据

  • actions:异步操作或复杂逻辑的提交（调用mutation）的包裹函数

  • Mutations ：通常使用全小写字母，并且可以使用下划线来分隔单词，例如 update_count。

    • 第一个参数是state也就是状态 ,通过state 来调用数据

  • Actions ：可以使用驼峰命名法，并且通常在名称中包含动词，以表明它们执行的操作，例如 updateCount。

    • 第一个参数是context 是上下文,和 state相似
js 复制代码 
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex); // 使用 Vuex 插件

const store = new Vuex.Store({
  state: {
    count: 10
  },
  actions: {
    async updateCount({ commit }, n) {
      commit('update_count', n);
    },
    async updateCount2(context, n) {
      context.commit('update_count', n);
    }
  },
  mutations: {
     //可以同名,但是不推荐
    update_count(state, n) {
      state.count = n;
    }
  }
});

export default store;
modules

分模块

  • Vue 使用单一状态树,当项目比较大时,状态会集中,从而导致项目臃肿
  • 将vuex配置文件导入 根配置下的 modules 就可以了
导入模块
js 复制代码 
// store/modules/user.js
const state = { ... };
const mutations = { ... };
const actions = { ... };
const getters = { ... };

export default {
  state,
  mutations,
  actions,
  getters
};
// store/index.js 根模块
import Vuex from 'vuex';
import user from './modules/user'; 
const store = new Vuex.Store({
  modules: {
    user
  }
});
export default store;
使用

  • 子模块state

    • $store.state.模块名.属性名
    • mapState映射:
      mapState('模块名',['属性名']);
      this.属性名 就可以访问数据了

  • 子模块getters

    • $store.getters['模块名/属性名称']
    • mapGetters映射:
      mapGeters('模块名',['属性名','属性2'])
      this.属性名 就可以获得数据
    • 模块名/属性名称:是因为命名是时候就是这命名的

  • 子模块mutations

    • $store.commit['模块名/属性名称']
    • mapMutations映射:
      mapMutations('模块名',['函数名','函数2'])
      this.函数名() 就可以调用函数了
    • 模块名/属性名称:是因为命名是时候就是这命名的

  • 子模块actions

    • $store.dispatch['模块名/属性名称']

    • mapActions映射:

      mapActions('模块名',['函数名','函数名2'])

      this.函数名() 就可以调用函数了

    • 模块名/属性名称:是因为命名是时候就是这命名的

数据的更改

  • this.$emit() 是 Vue 组件中用来触发自定义事件的方法。当调用 this.$emit('eventName', param) 时，它会向父组件发出一个事件，父组件可以监听这个事件并做出响应。
  • 同步:
    • 而在 Vuex 中，this.$store.commit('mutationName', param) 用于触发状态变更。这里的 commit 方法用于调用 store 中定义的 mutations，mutations 是同步函数，用于更改 store 中的状态（state）。
  • 异步:
    • this.$store.dispatch('actionName', payload) 来分发 actions。这会告诉 Vuex 执行相应的 action 函数。

辅助函数

mapState
  • 将store中的数据,自动映射到 组件的 计算属性中
  • 可以直接this.属性名 来访问数据
js 复制代码 
//引入mapState
import { mapState } from 'vuex';

//使用
export default {
  computed: {
    // 使用对象展开运算符将所有映射的状态转为计算属性
    ...mapState([
      // 映射 this.count 为 store.state.count
      'count'
    ]),
    // 映射 this.doubleCount 为 store.getters.doubleCount
    ...mapState({
      'doubleCount': state => state.count * 2
    })
  }
}
//-------------------
computed:{ ...mapState['状态名'] }
//# 等价
computed:{ '状态名'(){
    return this.$store.state.count
}}
mapMutatuons
  • 将mutations同步函数 中的方法,映射到 methods中
  • 可以直接this.函数名(n) 来调用函数
js 复制代码 
//引入 mapMutatuons
import {mapMutatuons} from 'vuex'
//使用
export default {
  methods: {
    ...mapMutations([
      'update_count' // 直接使用 mutation 名称
    ]),
    ...mapMutations({
      'set_count': 'update_count' // 为 mutation 提供一个别名
    }),
    increment() {
      this.update_count(1); // 调用 Vuex store 的 mutation
    },
    decrement() {
      this.set_count(-1); // 使用别名调用 mutation
    }
  }
}
//---------------------------------
methods:{
  ...mapMutations(['方法名'])  
}

//等价
methods:{
  '方法名'(参数){
     this.$store.commit('方法名',参数)
  }
}
mapActions
  • 将actions异步操作中的方法,映射到 methods中
  • 可以直接this.函数名(n) 来调用函数
js 复制代码 
//导入mapActions
import { mapActions } from 'vuex';

//使用
export default {
  methods: {
    ...mapActions([
      'UpdateCount' // 将 `this.update_count` 映射为 `this.$store.update_count('actionName',obj)`
    ]),
    ...mapActions({
      'mappedActionName': 'UpdateCount' // 将 `this.mappedActionName` 映射为 `this.$store.dispatch('update_count')`
    }),
  }
}
//--------------------
methods:{
    ..,mapActions([方法名])
}
# 等价
methods:{
  '方法名'(参数){
     this.$store.dispatch('方法名',参数)
  }
}
mapGetters
  • 将getters中的函数 中的方法,映射到 computed中
  • 可以直接this.函数名(n) 来调用函数
示例
vue 复制代码 
<template>

</template>
<script>
import {mapState,mapMutations,MapActions,MapGetters} form 'vuex'
export default{
    name:'test',
    computed:{
       ...mapState(['count']),
       ...maoGetters(['filterList'])
    },
    methods:{
       ...mapMutations('updata_count'),
       ...MapActions('UpdataCount')
    }
}
</script>
相关推荐
永乐春秋44 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE：基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下，循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中，vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作