Vuex—简介+简单使用

最新推荐文章于 2024-05-04 22:39:25 发布
最新推荐文章于 2024-05-04 22:39:25 发布
阅读量217 收藏
点赞数 2
分类专栏： Vue学习 文章标签： javascript vue.js 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guuiabc/article/details/128794812
版权

## Vuex

### 1.概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

State里面可以保存很多的数据

Actions+Mutations+States=> vuex

Dispatch 里面需要传两个参数：1.动作 2.参数

Actions里面保存了多组 name，function

function里自己调用Commit（‘name’，参数 ）

Mutations里 有很多对象 name，function，还有State和参数

写代码之后，会自动进行Mutate

Action可以跟后端数据库连接（Ajax）

Vue Component可以直接调用Commit直接到Mutations

有一个store管理

### 2.何时使用？

多个组件需要共享数据时

### 3.搭建vuex环境

1. 创建文件：```src/store/index.js```

```js

  //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
      actions,
      mutations,
      state
   })
   ```

2. 在```main.js```中创建vm时传入```store```配置项

```js

  //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
      el:'#app',
      render: h => h(App),
      store
   })

### 4.基本使用

1. 初始化数据、配置```actions```、配置```mutations```，操作文件```store.js```

```js

 //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //响应组件中加的动作
      jia(context,value){
         // console.log('actions中的jia被调用了',miniStore,value)
         context.commit('JIA',value)
      },
   }
   
   const mutations = {
       //执行加
      JIA(state,value){
         // console.log('mutations中的JIA被调用了',state,value)
         state.sum += value
      }
   }
   
   //初始化数据
   const state = {
      sum:0
   }
   
   //创建并暴露store
   export default new Vuex.Store({
      actions,
      mutations,
      state,
   })

2. 组件中读取vuex中的数据：```$store.state.sum```

3. 组件中修改vuex中的数据：```$store.dispatch('action中的方法名',数据)``` 或 ```$store.commit('mutations中的方法名',数据)```

> 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写```dispatch```，直接编写```commit```

### 5.getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在```store.js```中追加```getters```配置

```js

  const getters = {
      bigSum(state){
         return state.sum * 10
      }
   }
   
   //创建并暴露store
   export default new Vuex.Store({
      ......
      getters
   })
   ```

3. 组件中读取数据：```$store.getters.bigSum```

### 6.四个map方法的使用

1. <strong>mapState方法：</strong>用于帮助我们映射```state```中的数据为计算属性

```js

  computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
           
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
  },

```

2. <strong>mapGetters方法：</strong>用于帮助我们映射```getters```中的数据为计算属性

```js

  computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
  
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
  },

```

3. <strong>mapActions方法：</strong>用于帮助我们生成与```actions```对话的方法，即：包含```$store.dispatch(xxx)```的函数

```js

  methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
  }

```

4. <strong>mapMutations方法：</strong>用于帮助我们生成与```mutations```对话的方法，即：包含```$store.commit(xxx)```的函数

```js

  methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
      
       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
  }

```

> 备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

### 7.模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确。

2. 修改```store.js```

```javascript

   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
      }
    }
  }
  
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
  }
  
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
    }
  })

```

3. 开启命名空间后，组件中读取state数据：

```js

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),

```

4. 开启命名空间后，组件中读取getters数据：

```js

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])

```

5. 开启命名空间后，组件中调用dispatch

```js

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

```

6. 开启命名空间后，组件中调用commit

```js

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

### 4.基本使用代码详情

Count.vue:


<template>
    <div>
        <h1>当前求和为：{{ $store.state.sum }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>
<script>
    export default {
        name:'Count',
        data() {
            return {
                n:1, //用户选择的数字
                
            }
        },
        methods: {
            //commit可以直接跟mutation对话
            increment(){
                this.$store.commit('JIA',this.n)
            },
            decrement(){
                this.$store.commit('JIAN',this.n)
            },
            incrementOdd(){
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                this.$store.dispatch('jiaWait',this.n)
            },
        },
    }
</script>
<style lang="css">
    button{
        margin-left: 5px;
    }
</style>

Store/index.js:


//该文件用于创建Vuex中最为核心的store
//引入Vue
import Vue from "vue";
//引入Vuex
import Vuex from 'vuex'
//使用了之后，都可以使用store配置项
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions={
    //context里面包括了一些vm认为你会用到的对象
    // jia(context,value){
    //     context.commit('JIA',value)
    // },
    // jian(context,value){
    //     context.commit('JIAN',value)
    // },
    jiaOdd(context,value){
        if(context.state.sum%2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//准备mutations——用于操作数据（state）
const mutations={
    //大写可以区分
    JIA(state,value){
        state.sum+=value
    },
    JIAN(state,value){
        state.sum-=value
    }
}
//准备state——用于存储数据
const state={
    sum:0 //当前的和
}
//创建store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})
//导出（暴露）store
//export default store

Main.js:


//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store/index'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

### 5.getters的使用代码详情

Count.vue:


<template>
    <div>
        <h1>当前求和为：{{ $store.state.sum }}</h1>
        <h3>当前求和放大10倍为:{{$store.getters.bigSum}}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>
<script>
    export default {
        name:'Count',
        data() {
            return {
                n:1, //用户选择的数字
                
            }
        },
        methods: {
            //commit可以直接跟mutation对话
            increment(){
                this.$store.commit('JIA',this.n)
            },
            decrement(){
                this.$store.commit('JIAN',this.n)
            },
            incrementOdd(){
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                this.$store.dispatch('jiaWait',this.n)
            },
        },
    }
</script>
<style lang="css">
    button{
        margin-left: 5px;
    }
</style>

Store/index.js:


//该文件用于创建Vuex中最为核心的store
//引入Vue
import Vue from "vue";
//引入Vuex
import Vuex from 'vuex'
//使用了之后，都可以使用store配置项
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions={
    //context里面包括了一些vm认为你会用到的对象
    // jia(context,value){
    //     context.commit('JIA',value)
    // },
    // jian(context,value){
    //     context.commit('JIAN',value)
    // },
    jiaOdd(context,value){
        if(context.state.sum%2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//准备mutations——用于操作数据（state）
const mutations={
    //大写可以区分
    JIA(state,value){
        state.sum+=value
    },
    JIAN(state,value){
        state.sum-=value
    }
}
//准备state——用于存储数据
const state={
    sum:0 //当前的和
}
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}
//创建store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
//导出（暴露）store
//export default store

### 6.四个map方法的使用代码详情

mapState, mapGetters:
Count.vue:


<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为:{{bigSum}}</h3>
        <h3>我在{{  school }},学习：{{  subject }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>
<script>
    import {mapState, mapGetters} from 'vuex'
    export default {
        name:'Count',
        data() {
            return {
                n:1, //用户选择的数字
                
            }
        },
        computed:{
            //程序员亲自书写的代码
            // sum(){
            //  return this.$store.state.sum
            // }
            //1.借助mapState生成=>对象写法
            //mapState里面需要几组数据，方法名和去state里面找的data
            //...能够使mapState结果（返回值为数组）里的每一项展开放在computed数组里面
            //...mapState({sum:'sum',school:'school',subject:'subject'})
            //2.函数名与data值一样，可以用数组写法简写
            ...mapState(['sum','school','subject']),
            ...mapGetters(['bigSum'])
        },
        methods: {
            //commit可以直接跟mutation对话
            increment(){
                this.$store.commit('JIA',this.n)
            },
            decrement(){
                this.$store.commit('JIAN',this.n)
            },
            incrementOdd(){
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                this.$store.dispatch('jiaWait',this.n)
            },
        },
    }
</script>
<style lang="css">
    button{
        margin-left: 5px;
    }
</style>

mapMutations,mapActions:

<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为:{{bigSum}}</h3>
        <h3>我在{{  school }},学习：{{  subject }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>
<script>
    import {mapState, mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        name:'Count',
        data() {
            return {
                n:1, //用户选择的数字
                
            }
        },
        computed:{
            ...mapState(['sum','school','subject']),
            ...mapGetters(['bigSum'])
        },
        methods: {
            //commit可以直接跟mutation对话
            // increment(){
            //  this.$store.commit('JIA',this.n)
            // },
            // decrement(){
            //  this.$store.commit('JIAN',this.n)
            // },
            //借助mapMutations生成对应的方法，方法中会调用commit方法，去联系mutation
            //1.对象写法
            ...mapMutations({increment:'JIA',decrement:'JIAN'}),
            //2.数组写法
            //函数名字也要修改
            //...mapMutations(['JIA','JIAN']),

            // incrementOdd(){
            //  this.$store.dispatch('jiaOdd',this.n)
            // },
            // incrementWait(){
            //  this.$store.dispatch('jiaWait',this.n)
            // },
            //借助mapActions生成对应的方法，方法中会调用diapath方法，去联系actions
            //1.对象写法
            ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
            //2.数组写法
        },
    }
</script>
<style lang="css">
    button{
        margin-left: 5px;
    }
</style>
糖醋小排顾。
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-login-template:vue+vuex+axios+sessionStorage登录验证
04-28
使用vuex+axios+sessionStorage做登录验证 简介 作为vue的初学者，在了解了基础知识，通过查阅资料写的一个包含登录验证的vue基础模板，项目中只包含登录页面和一个极其简单的首页。 模板已在本地通过后台接口测试。...
vue框架介绍的一些简介
04-04
Vue.js是一套用于构建用户界面的渐进式框架，发布于2014年2月。它拥有自己规则的语法，并...插件化：Vue.js允许使用插件对功能进行扩展，常用的扩展插件有vue-router（用于构建单页面应用）、Vuex（状态管理模式）等。
vuex中store存储store.commit和store.dispatch的用法
10-15
主要介绍了vuex中store存储store.commit和store.dispatch的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
（详细）vuex入门及使用
ajiang0622的博客
09-27 201
vuex入门及使用 一、什么是vuex 专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信的方式，且适用于任意组件间的通信。 Github 地址: https://github.com/vuejs/vuex 二、vuex的工作原理图 理解原理图： Vue Components 组件：客人 Vuex：餐厅 Actions：服务员 Mutation：后厨 State：菜品 1、客人来到餐厅 跟服务员说（发起disp
2024年Web前端最全vue中的VueX详解及使用_vuex详解和用法，web快速开发框架
最新发布
2401_84419493的博客
05-04 794
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
Vuex的使用
nunumaymax的博客
06-09 5068
Vuex是 Vue 的共享状态管理，小型项目使用 store模式 即可，中大型项目需要使用 VueX。mapState, mapGetters ：写在computed中；mapMutations, mapActions ：写在methods中。state: 变量；getters: state的计算属性；mutations: 同步；actions: 异步。state: 如果在模块中定义，则为局部的state；getters: 如果在模块中定义，则为局部的getters；
vue项目中引入vuex以及vuex简单的使用
myl_0808的博客
12-07 677
vuex安装 npm install --save vuex 安装成功后，可在package.json中看到安装的版本 在store文件夹中的index.js中引入 import Vuex from 'vuex'; Vue.use(Vuex); 在index.js中创建vuex的store const store = new Vuex.Store({ state:{ Authorization:localStorage.getItem('Authorization') ? loc
Vuex使用方法，解析，图解，保姆级指引
月苏西的博客
01-04 949
最近写项目，老是搞不明白vuex，所以翻看了官方文档，和很多资料，现在总结一下结果： vuex是什么？ vuex是一个专门为vue.js应用程序开发的状态管理模式 vuex是单向数据流的一种实现 你可以把它想象成把data里面的属性，数据，放到一个公共的文件内，提供给其他组件使用。所以它就是我们需要共享的data，使用vuex进行统一集中式的管理 一. vuex中，有默认的五种基本对象： state：存储状态，驱动应用的数据源 （this.$store.state.xxx) getters：
vue.js的状态管理vuex中store的使用详解
12-13
一、状态管理（vuex）简介 vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools ...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
- 使用 Pinia替代 Vuex，轻量、简单、易用 - 导出excel,自定义样式导出excel、多表头导出 - 表单、表格、水印、多标签显示、打印功能，图片打印、表格打印、普通打印、二维码、拖拽、markdown、头像裁剪、图片上传.....
SkyBlog:一个简单的Spring Boot + Vue 前后端分离的博客系统 https
04-19
一个简单的Spring Boot + Vue 前后端分离的博客系统 博客预览 简介 很早就有了做个人博客的想法，学习了springboot后，趁热打铁，就做了这个博客来练手。项目是基于 Spring Boot + Vue 的前后端分离博客系统。 前端 ...
vue技术之vuex的使用
m0_62956385的博客
08-19 765
vue技术之vuex的使用
Vuex dispatch用法
热门推荐
u010227042的博客
03-06 1万+
Vuex的作用： 针对全局数据 多个组件都要使用某个变量； 但是父子组件之间传递又很麻烦 使用vuex 可以进行状态管理，可以保证数据最新 数据是存储在浏览器维护的内存中 当页面刷新f5的时候，所保存的数据被销毁 Vuex的配置： 新建文件 src\store\index.js import Vue from 'vue' import Vuex from 'vuex' import common from './modules/common' import user from './modules/u
前端vuex中dispatch的使用
qq_41148615的博客
02-27 1908
Vuex中dispatch的用法！Vuex是专为Vue.js应用程序开发的状态管理模式。this.$store.dispatch是用于触发vuex中action的方法。
vuex的几个属性及其使用传参
qq_55031668的博客
01-17 1512
vuex的几个属性及其使用传参
关于 Vuex 的作用与常见用法 ——详解（初学者也能看懂）
小文同学的博客
03-19 2192
关于 Vuex 的作用与常见用法 ——详解（小白 / 初学者 / 新手也能理解），简单易上手
vuex的使用
LJXLQXX的博客
05-09 169
vuex的详细使用
Vuex详解，一文读懂并使用Vuex
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
10-01 7917
如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vue项目中Vuex的使用
weixin_50884410的博客
11-11 2493
vue项目中Vuex的使用 安装vuex vuex实现模块化开发
vuex++Cannot+read+properties+of+undefined+(reading++value+)
12-05
根据提供的引用内容，这个错误可能是因为没有正确地初始化Vuex store或者没有正确地传递props导致的。以下是一些可能的解决方案： 1. 确保正确地初始化了Vuex store，并且在组件中正确地引入了store。可以在组件中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值