vuex如何使用（小白也能看得懂）

已于 2024-05-11 13:54:25 修改
阅读量516 收藏 1
点赞数 3
文章标签： 学习 javascript 前端
于 2023-07-06 11:55:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H524268015wsw/article/details/131567747
版权

目录

1.什么是vueX 官网介绍： State | Vuex (vuejs.org)

2.vueX包括哪些模块

(1) State存放共享数据(count)

(2) mutation更改State中数据。

(3) Action中执行异步函数。

(4)  Getter 用于对Store 中的数据进行加工处理形成新的数据。

1.什么是vueX 官网介绍： State | Vuex (vuejs.org)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。ps:简单来说就是为了解决多组件共享数据问题。

2.vueX包括哪些模块

vueX包括5个模块 State Getter Action  mutation Module.

State是用来存放组件之间需要共享的数据。

Getter 用于对state 中的数据进行加工处理形成新的数据。

Action用于处理异步函数。

mutation用于更改State中的数据状态。

Module用于将store分成多个模块。

(1) State存放共享数据(count)

页面页面中有两种使用方法，第一中是直接使用插值语法{{ $store.state.count }}渲染，另一种是使用mapState函数将全局数据count，映射为当前组件的计算属性。


<template>
    <div>
        //第一种
        <h2>当前的值为：{{  $store.state.count }}</h2>
        //第二种 
        <h2>当前的值为：{{ count }}</h2>
    </div>
</template>

<script>
// 按需引入mapState函数
import { mapState } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    // 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
    computed:{
        ...mapState(['count'])
    },
}
</script>




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

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

(2) mutation更改State中数据。

mutation两种方法更改State中数据，一种是直接调用，另一种是按需引入将mutation中的函数通过mapMutation函数映射到组件methods中直接调用。

第一种是this.$store.commit('store中muatation定义的函数名'，参数)

<template>
    <div>
        <h2>当前的值为：{{ $store.state.count }}</h2>
        <button @click="addBtn">数量+1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods:{
        // mutation用于变更store中的数据
        // 只能通过mutation变更Store数据，修改store.state中的值不能直接使用                  this.$store.state.count ++ 
        // 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
        addBtn(){
            // this.$store.commit(定义的函数名，传递值)
            this.$store.commit('addN',2)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
       addN(state, num) {
       state.count += num
   },
},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

第二种使用mapMutation将mutation中的函数映射为组件中methods中的一个方法。

<template>
    <div>
        <h2>当前的值为：{{ count }}</h2>
        <button @click="subBtn">数量-1</button>
    </div>
</template>

<script>
// 按需引入mapMutations函数
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    methods:{
        //按需引入 mapMutations函数 将需要的mutations函数，映射为当前组件的 methods方法:
        ...mapMutations(['sub']),
        subBtn(){
            //直接传参数不需要再声明函数名
            this.sub(3)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
     sub(state,num) {
          state.count -= num
    }
},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

(3) Action中执行异步函数。

不要再mutation中执行异步代码，因为会导致页面更新这个改变的值，而state中的值没有改变。所以Action专门用于处理异步函数，但是Action并不是直接执行异步函数，而是要通过dispath方法区调用mutation中的方法从而达到异步更改state中的数据。

例如：

在Action中执行异步函数也有两种方式，一种是直接调用，另一种是和mapMutation差不多的mapAction函数映射。

第一种直接调用：

<template>
    <div>
        <h2>当前的值为：{{ $store.state.count }}</h2>
        <button @click="addBtnAsync">异步数量+1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods:{
        // 异步+1
        addBtnAsync(){
            // this.$store.commit(定义的函数名，传递值)
               this.$store.dispatch('addAsync',5)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
       add(state, num) {
       state.count += num
   },
},
  // 处理异步函数
  actions: {
        //num是传递过来的参数
    addAsync(context,num) {
      setTimeout(() => {
        context.commit('add',num)
      }, 1000)
    },

},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

 第二种使用mapAction函数映射

<template>
    <div>
        <h2>当前的值为：{{ count }}</h2>
        <button @click="subBtn">数量-1</button>
    </div>
</template>

<script>
// 按需引入mapActions 函数
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    methods:{
        //按需引入 mapActions函数 将需要的mapActions函数，映射为当前组件的 methods方法:
        ...mapActions(['subAsyncN']),
        subBtn(){
            //直接传参数不需要再声明函数名
            this.subAsyncN(3)
        }
    }
}
</script>


在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {
    //num是传递过来的参数
     subN(state,num) {
          state.count -= num
    }
},
  // 处理异步函数
  actions: {
    subAsyncN(context,num) {
      setTimeout(() => {
        context.commit('subN',num)
      }, 1000);
    }

},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {},
  modules: {}
})

(4)  Getter 用于对Store 中的数据进行加工处理形成新的数据。


<template>
    <div>
        <h2>当前的值为：{{ showNum}}</h2>
    </div>
</template>

<script>
// 按需引入 mapGetters 函数
import { mapGetters} from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    // 通过刚才导入的mapGetters函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
    computed:{
        ...mapGetters(['showNum'])
    },
}
</script>




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

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存放共享的数据
  state: {
    count: 0
  },
  //用于变更state中的数据状态
  mutations: {},
  // 处理异步函数
  actions: {},
  // Getter 用于对Store 中的数据进行加工处理形成新的数据。
  getters: {
    showNum(state) {
      return 'getters当前最新的值为' + state.count
    }
  },
  modules: {}
})

ps总结：State用于存放数据，Action用于执行异步函数，mutation用于修改state中的数据，Getter加工数处理成新的数据，但是也会随着state中数据的变化二变化 。

一只大黑洋
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue】高级系列（十）vuex - 状态自管理应用 - state - view - actions
YK菌的博客
02-26 2224
学习Vuex
Vuex怎么使用？来看看吧~
m0_67094505的博客
09-18 5971
sate.js 存储变量Getters.js 获取变量值、mutations.js 改变变量值（同步）actions.js 改变变量值（异步）
使用vuex的全步骤加案例教程
最新发布
m0_56947432的博客
07-06 601
使用Vuex管理数据的好处： A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护 B.能够高效的实现组件之间的数据共享，提高开发效率 C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。####A.State State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储 例如，打开项目中的store.js文件，在State对象中可以添加我们要共享的数据，如：count:0。在vuex中我们可以使用Action来执行异步操作。
Vuex的使用
nunumaymax的博客
06-09 6428
Vuex是 Vue 的共享状态管理，小型项目使用 store模式 即可，中大型项目需要使用 VueX。mapState, mapGetters ：写在computed中；mapMutations, mapActions ：写在methods中。state: 变量；getters: state的计算属性；mutations: 同步；actions: 异步。state: 如果在模块中定义，则为局部的state；getters: 如果在模块中定义，则为局部的getters；
Vuex的用法
JohnJill的博客
02-25 2287
Vuex用法学习
vuex的使用
baiaifei的博客
06-13 789
之前用vue做过项目，当遇到多个组件间共享数据时，会用到vuex。所以vuex解决了组件之间同一状态的共享问题，那么如何使用vuex呢？我总结了以下几点：一、vuex的使用：1、src目录下面新建一个vuex的文件夹；2、vuex 文件夹里面新建一个store.js；3、安装vuex  cnpm install vuex --save 4、在刚才创建的store.js引入vue，引入vuex 并且...
Vuex怎么使用
姚辉乾
09-04 956
第一步，安装vuex npm i vuex -S 第二步引入vuex import Vuex from 'vuex' Vue.use(Vuex) 第三步在new Vue里面安装store例如下图：   例如获取state里面的num的数据： 第一步在main.js里面 第二步：在随便一个vue页面里面写入以下内容 就这样num的数量就获取到了 如何改变num值呢，例...
Vuex
weixin_38170065的博客
09-06 536
1. vue中各个组件之间传值 1.父子组件 父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 2.非父子组件或父子组件 通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 3.非父子组件或父子组件 更好的方式是在...
vuex如何使用
weixin_58089129的博客
09-28 763
1.Vuex-在Vue项目使用Vuex 第一种情况： 当你在 旧的项目组使用vuex， 要先在终端下载vuex这个包，然后在配置 ​ 第一步：在终端 输入：yarn add vuex 或 npm i vuex 下载vuex。 ​ 第二步：创建Vuex.store实例 向Vue实例注入store 。 第二种情况： 在新项目中使用， 在配置脚手架，创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的） Vuex的内容有哪些？ vuex中.
在vue中如何使用vuex
weixin_46165123的博客
12-02 6572
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex的全面用法总结
shi15926lei的博客
07-20 4799
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。Vuex 是什么？| Vuex。
Vuex详解，一文读懂并使用Vuex
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
10-01 8984
如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex的使用方法
bamboozjy的博客
07-31 969
1.安装依赖  npm i vuex -D 2.在src下新建store文件夹，并此文件夹下新建store.js，文件内容为： import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); var store = new Vuex.Store({ state: { arr: [], msg: "bamb...
如何使用vuex
weixin_41578487的博客
03-06 537
官网：https://vuex.vuejs.org安装1. 使用命令行：npm install vuex –save2. 在src文件夹下新建一个文件夹store,里面新建一个文件：store.js3. 在main.js里引入store文件： 4. 如何在组件中使用store中的数据：找到需要使用数据的组件，在计算属性里如下写入代码，可引入store里面的数据： 引入store里面的方法（也是写在...
VueX使用
m0_60505147的博客
10-31 4763
state: {},// 定义mutations}})
Vuex使用
weixin_64770583的博客
07-24 313
Vuex的使用 action, mutation ,state, dispatch ,commit ,mapState ,mapMutation,mapAction
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值