vuex入门使用详解
1、什么是vuex
Vuex 是实现组件全局状态(数据)管理的一种机制, 可以方便的实现组件之间数据的共享。数据缓存等等
2、vuex的使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <br>1、安装完vuex依赖后。在项目的src下新建一个store文件夹, 然后再store文件夹下新建一个index.js文件,文件内容如下 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, getters:{ } }) 2、在main.js中将 store 对象挂载到 vue 实例中 import store from './store/index.js' //..... new Vue({ render: h => h(App), // 将创建的共享数据对象,挂载到 Vue 实例中 // 所有的组件,就可以直接从 store 中获取全局的数据了 store, }).$mount( '#app' ) |
3.Vuex的核心概念 state、mutation、action、getter
3-1、state
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 1、创建数据 export default new Vuex.Store({ state: { num: 0 } }) 2、访问数据的第一种方式 this .$store.state.全局数据名称 //访问刚刚创建的num就是 this.$store.state.num 3、访问数据的第二种方式 // 1. 从 vuex 中按需导入 mapState 函数 import { mapState } from 'vuex' //..... // 2. 将全局数据,映射为当前组件的计算属性 computed: { ...mapState([ 'num' ]) } 4、组件绑定响应式 <template> <div id= "app" > <h1>num : {{ this .$store.state.num}}</h1> <!-- this .$store.state.全局数据名称 --> <h1>num : {{num}}</h1> </div> </template> <script> import { mapState } from "vuex" ; //从 vuex 中按需导入 mapState 函数 export default { name: "App" , //将全局数据,映射为当前组件的计算属性 computed: { ...mapState([ "num" ]) } }; </script> |
3-2、mutation
- mutation用于改变store中的数据(state)
- 只能通过mutaion改变store数据、不可以直接操作store数据(state)
- 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 1、定义不带参数 export default new Vuex.Store({ state: { num:0 }, mutations: { numAddOne(state){ //num自增1 state.num++; } } }) 2、定义带参数 mutations: { //n为参数 numAddN(state,n){ //num自增n state.num+=n; } }, 3、触发方式和state一样,也有量何种方式 第一种方式 methods:{ addOne(){ this .$store.commit( 'numAddOne' ) //触发 mutations 的第一种方式 } } 第二种方式 import {mapMutations } from "vuex" ; //从 vuex 中按需导入 mapMutations 函数 //... methods:{ ...mapMutations([ 'numAddN' ]), // 将指定的 mutations 函数,映射为当前组件的 methods 函数 } 4、组件响应式绑定 <template> <div id= "app" > <h1>num : {{ this .$store.state.num}}</h1> <!-- this .$store.state.全局数据名称 --> <button @click= "addOne" >+ 1</button> <h1>num : {{num}}</h1> <button @click= "numAddN(3)" >+ n</button> </div> </template> <script> import { mapState ,mapMutations } from "vuex" ; //从 vuex 中按需导入 mapMutations 函数 export default { name: "App" , components: {}, computed: { ...mapState([ "num" ]) }, data() { return {}; }, methods:{ ...mapMutations([ 'numAddN' ]), // 将指定的 mutations 函数,映射为当前组件的 methods 函数 addOne(){ this .$store.commit( 'numAddOne' ) } } }; </script> |
3-3 action
- Action 用于处理异步任务。
- 如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation的方式间接变更数据。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 1、定义不带参数 export default new Vuex.Store({ state: { num: 0 }, mutations: { numAddOne(state) { //num自增1 state.num++; } }, actions: { numAddOneAsync(context) { setTimeout(() => { context.commit( 'numAddOne' ) }, 1000) } } }) 2、定义带参数 export default new Vuex.Store({ state: { num: 0 }, mutations: { numAddN(state, n) { //num自增n state.num += n; } }, actions: { //n为参数 numAddNAsync(context,n) { setTimeout(() => { context.commit( 'numAddN' ,n) }, 1000) } } }) 3、触发action的第一种方式 methods:{ addOneAsync(){ this .$store.dispatch( 'numAddOneAsync' ) //触发 Action } } 4、触发action的第二种方法 //从 vuex 中按需导入 mapActions 函数 import { mapActions } from 'vuex' //..... //将指定的 actions 函数,映射为当前组件的 methods 函数 methods: { ...mapActions([ 'numAddNAsync' ]) } 5、组件代码响应式效果 <template> <div id= "app" > <h1>num : {{ this .$store.state.num}}</h1> <!-- this .$store.state.全局数据名称 --> <button @click= "addOne" >+ 1</button> <br> <button @click= "addOneAsync" >+ 1 Async</button> <h1>num : {{num}}</h1> <button @click= "numAddN(3)" >+ n</button> <br> <button @click= "numAddNAsync(3)" >+ n Async</button> </div> </template> <script> import { mapState ,mapMutations ,mapActions } from "vuex" ; //从 vuex 中按需导入 mapXXXX 函数 export default { name: "App" , components: {}, computed: { ...mapState([ "num" ]) }, data() { return {}; }, methods:{ ...mapActions([ 'numAddNAsync' ]) , //将指定的 actions 函数,映射为当前组件的 methods 函数 ...mapMutations([ 'numAddN' ]), // 将指定的 mutations 函数,映射为当前组件的 methods 函数 addOne(){ this .$store.commit( 'numAddOne' ) //触发Mutation }, addOneAsync(){ this .$store.dispatch( 'numAddOneAsync' ) //触发 Action } } }; </script> |
3-4、getter
- Getter 用于对 Store 中的数据进行加工处理形成新的数据。
- Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性 。
- Store 中数据发生变化,Getter 的数据也会跟着变化。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1、定义getter export default new Vuex.Store({ state: { num: 0 }, getters: { //定义Getter NumText(state ){ return '当前的num值为: ' + state.num } } }) 2、使用getter的第一种方式 this .$store.getters.名称 //这里就是 this.$store.getters.NumText 3、使用getter的第二种方式 import { mapGetters } from 'vuex' //..... computed: { ...mapGetters([ 'NumText' ]) } 4、组件响应式数据 <template> <div id= "app" > <h1>{{ this .$store.getters.NumText}}</h1> <!-- this .$store.getters.名称 --> <button @click= "addOne" >+ 1</button> <br> <button @click= "addOneAsync" >+ 1 Async</button> <h1>{{NumText}}</h1> <button @click= "numAddN(3)" >+ n</button> <br> <button @click= "numAddNAsync(3)" >+ n Async</button> </div> </template> <script> import { mapState ,mapMutations ,mapActions,mapGetters } from "vuex" ; //从 vuex 中按需导入 mapXXXX 函数 export default { name: "App" , components: {}, computed: { ...mapState([ "num" ]), ...mapGetters([ 'NumText' ]) }, data() { return {}; }, methods:{ ...mapActions([ 'numAddNAsync' ]) , //将指定的 actions 函数,映射为当前组件的 methods 函数 ...mapMutations([ 'numAddN' ]), // 将指定的 mutations 函数,映射为当前组件的 methods 函数 addOne(){ this .$store.commit( 'numAddOne' ) //触发Mutation }, addOneAsync(){ this .$store.dispatch( 'numAddOneAsync' ) //触发 Action } } }; </script> |
4、模块化module
Module是store分割的模块,每个模块拥有自己的state、getters、mutations、actions。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 |
本文来自博客园,作者:青石小巷,转载请注明原文链接:https://www.cnblogs.com/lgnblog/p/16189919.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通