Vuex 学习及demo

最新推荐文章于 2021-12-30 19:57:13 发布
最新推荐文章于 2021-12-30 19:57:13 发布
阅读量173 收藏 1
点赞数
分类专栏： Vue 文章标签： vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14994863/article/details/99933763
版权

Vuex：

安装：

npm install vuex --save

在模块中使用：

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

Vue.use(Vuex)

开始，简单实现：

--store.js代码：
import Vue from 'vue'
import Vuex from 'vuex'
// 引用vuex
Vue.use(Vuex)

const state = {
    count: 42
}

// mutations类似于事件，对状态进行更改，调用方式: $store.commit('add')
const mutations = {
    add(state) {
        state.count ++
    },
    reduce(state) {
        state.count --
    }
}

export default new Vuex.Store({
    state,
    mutations
})

--vue组件代码：vuex.vue
import Vue from 'vue'
import Vuex from 'vuex'
// 引用vuex
Vue.use(Vuex)

// 定义状态对象
const state = {
    count: 42
}

// mutations类似于事件，对状态进行更改，调用方式: $store.commit('add')
const mutations = {
    add(state) {
        state.count ++
    },
    reduce(state) {
        state.count --
    }
}

export default new Vuex.Store({
    state,
    mutations
})

--main.js代码：
import Vue from 'vue'
import router from './router'
import vuex from './components/vuex.vue'
import store from './store/store'

//引入store.js文件和vuex.vue模板文件

new Vue({
    el: '#app',
    router,
    store,
    render: h => h(vuex),

})

在组件中访问状态对象：缩写 $store.state.count

可以在js中一次引入需要的状态对象，不用每次使用都需要 $store.state.count 的格式：
<template>
    <div>
        <h1>Hello Vuex</h1>
        <p>{{ count }}</p>
        <p>
            <!-- 两个按钮分别调用mutations的add和reduce事件 -->
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </p>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default { 
    computed: mapState([
        "count"
    ])
    /* 如下三种方式均可 */
    /*computed: {
        count() {
            return this.$store.state.count + 1
        }
    }*/
    /* computed: mapState({
      count:state => state.count  
    }) */ 
    /* computed: mapState({
        count: function(state) {
            return state.count
        }
    }) */
}
</script>

组件触发状态mutations：缩写 $store.commit(‘reduce’)"

// 向mutations的事件中传入对象，并对对象和state进行操作
const mutations = {
    add(state, obj) {
        state.count += obj.number1
    },
    reduce(state) {
        state.count --
    }
}

--vue模板代码：需要引入mapMutations,缩写状态事件，
<template>
    <div>
        <h1>Hello Vuex</h1>
        <p>{{ count }}</p>
        <p>
            <!-- 两个按钮分别调用mutations的add和reduce事件 -->
            <!-- 传入add事件一个对象，每次点击add按钮，count加10 -->
            <button @click="$store.commit('add', { number1: 10})">+</button>
            <!-- 缩写状态事件 -->
            <button @click="reduce">-</button>
        </p>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default { 
    methods: mapMutations([
        'add',
        'reduce'
    ])
}
</script>

Getter:

类似于computed（计算属性），对state进行处理后返回。
这样每次我们调用state的时候，都会先经过getters处理后再返回，如下代码，我们点击加号和减号时，count值都会先加1000然后再执行加一或减一操作：
--store.js代码：
import Vue from 'vue'
import Vuex from 'vuex'
// 引用vuex
Vue.use(Vuex)

const state = {
    count: 42
}

const getters = {
    count: state => {
        return state.count += 1000
    }
    /* 等同于如下代码: */
    /* count: function(state) {
        return state.count += 1000
    } */
}

// mutations类似于事件，对状态进行更改，调用方式: $store.commit('add')
const mutations = {
    add(state, obj) {
        state.count += obj.number1
    },
    reduce(state) {
        state.count --
    }
}

export default new Vuex.Store({
    state,
    mutations,
    getters
})

--vuex.vue代码：
<template>
    <div>
        <h1>Hello Vuex</h1>
        <p>{{ count }}</p>
        <p>
            <button @click="add">+</button>
            <!-- 缩写状态事件 -->
            <button @click="reduce">-</button>
        </p>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default { 
    methods: mapMutations([
        'add',
        'reduce'
    ]),
    computed: {
        count(){
            return this.$store.getters.count
        }
    }
}
</script>
getters的map形式：
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default { 
    computed: {
    	/* mapState也可写成如下格式 */
        ...mapGetters([
            "count"
        ])
    }
}
</script>

--等价于如下代码：
<script>
import { mapState, mapMutations } from 'vuex'
export default { 
    computed: {
        count(){
            return this.$store.getters.count
        }
    }
}
</script>

Action：

类似mutation，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
  • mutation是同步状态
  • action是异步状态
--点击‘addPlus’按钮，会先进行加一，再进行减一
---store.js代码：
import Vue from 'vue'
import Vuex from 'vuex'
// 引用vuex
Vue.use(Vuex)

const state = {
    count: 42
}

const getters = {
    count: state => {
        return state.count += 0
    }
}

// mutations类似于事件，对状态进行更改，调用方式: $store.commit('add')
const mutations = {
    add(state, obj) {
        state.count += obj.number1
    },
    reduce(state) {
        state.count --
    }
}

const actions = {
	/* 异步操作，先进行add操作，两秒后进行reduce操作 */
    addPlus (context) {
        context.commit('add', { number1: 1});
        setTimeout(() => {
            context.commit('reduce')
        }, 2000)
        console.log('执行')
    },
    reducePlus ({commit}) {
        commit('reduce')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

--vuex.vue:
<template>
    <div>
        <h1>Hello Vuex</h1>
        <p>{{ count }}</p>
        <p>
            <!-- 两个按钮分别调用mutations的add和reduce事件 -->
            <!-- 传入add事件一个对象，每次点击add按钮，count加10 -->
            <button @click="$store.commit('add', { number1: 10})">+</button>
            <!-- 缩写状态事件 -->
            <button @click="reduce">-</button>
        </p>
            <button @click="addPlus">addPlus</button>
            <button @click="reducePlus">reducePlus</button>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'

export default { 
    methods: {
        ...mapMutations([
            'add',
            'reduce'
        ]),
        ...mapActions([
            'addPlus'
        ]),
        ...mapActions([
            'reducePlus'
        ])
    },
    computed: {
        ...mapState([
            "count"
        ])
    }
}
</script>

Module：

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

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 的状态
示例：
--将上述例子放置到module中：
--store.js代码：
import Vue from 'vue'
import Vuex from 'vuex'
// 引用vuex
Vue.use(Vuex)

const state = {
    count: 42
}
const getters = {
    count: state => {
        return state.count += 0
    }
}

// mutations类似于事件，对状态进行更改，调用方式: $store.commit('add')
const mutations = {
    add(state, obj) {
        state.count += obj.number1
    },
    reduce(state) {
        state.count --
    }
}

const actions = {
    /* 异步操作，先进行add操作，两秒后进行reduce操作 */
    addPlus (context) {
        context.commit('add', { number1: 1});
        setTimeout(() => {
            context.commit('reduce')
        }, 2000)
        console.log('执行')
    },
    reducePlus ({commit}) {
        commit('reduce')
    }
}

const moduleA = {
    state,
    mutations,
    getters,
    actions
}

const moduleB = {
    state: { countB: 30 }
}

export default new Vuex.Store({
    modules: {
        aModule: moduleA,
        bModule: moduleB
    }
})

--vuex.vue代码：引入state中的count和countB方式要修改为从相应的module中引入
<template>
    <div>
        <h1>Hello Vuex</h1>
        <p>{{ $store.state.aModule.count }} -- {{ $store.state.bModule.countB }}</p>
        <p>
            <!-- 两个按钮分别调用mutations的add和reduce事件 -->
            <!-- 传入add事件一个对象，每次点击add按钮，count加10 -->
            <button @click="$store.commit('add', { number1: 10})">+</button>
            <!-- 缩写状态事件 -->
            <button @click="reduce">-</button>
        </p>
            <button @click="addPlus">addPlus</button>
            <button @click="reducePlus">reducePlus</button>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'

export default { 
    methods: {
        ...mapMutations([
            'add',
            'reduce'
        ]),
        ...mapActions([
            'addPlus'
        ]),
        ...mapActions([
            'reducePlus'
        ])
    }
}
</script>
crazy_wsp
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex的学习
m0_60264901的博客
05-05 495
Vuex的学习~
Vuex的使用Demo
12-30
通过这个示例，你可以学习如何初始化Vuex Store，如何定义和使用状态、getter、mutation和action，以及如何将Vuex集成到Vue组件中。这将有助于你构建具有复杂状态管理的大型Vue项目。记得实践是最好的老师，动手尝试...
Vuex_demo
Mikon_0703
12-18 377
1.在src目录中新建store文件，store文件夹中新建index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // new Vuex.Store 创建对象 export default new Vuex.Store({ state：{ ...共享的数据 count:0 }， // 对state中的数据进行处理，不会修改 getters:{ ...方法 showNum(count){ ..
用vuex完成一个小demo
weixin_46185369的博客
10-04 222
demo的效果是： 首先创建一个脚手架，需要引入vuex 准备工作做完之后，开始渲染页面： store/index.js async 代表一个异步操作 await用来接受axios发送请求的成功的结果 try catch用来捕获发起请求中的错误 component/shopCar.vue 1. 组件初始化钩子函数调用vuex中的action发起ajax请求 拿到数组 循环渲染 2.删除：点击传入索引 调用this.$store.commit('') 调用vuex中的m...
vuex教程(详细)附带demo
潇蓝诺依的博客
12-01 8495
vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。 (就是一种向各个组件可以传参的方式) 1. 准备 用脚手架搭建一个项目 安装vuex npm install vuex –save 新建文件夹store,并在此文件夹下新建store.js文件。项目目录,
vuex的理解以及简单的demo实现
xiaozheng0670的博客
02-19 130
vuex总结起来无非是： 存：mutations（只能由它来操作state） 中转：actions（处理异步任务给mutation） 取：getters（类似计算属性，依赖state数据） 库：state（即数据源） 使用方法，建议使用展开运算符方式获取， 注意：解构出来的方法只能有一个参数，如果有多个要传递，可以使用数组或者对象。 import {mapState,mapMutations,ma...
vuexdemo状态管理
08-19
在“vuexdemo状态管理”这个项目中，我们将学习如何使用 Vuex 来搭建一个状态管理的脚手架。首先，我们需要确保我们的开发环境已经安装了 Vue.js 和 Vuex。如果你还没有安装，可以使用以下命令全局安装 Vue CLI 和 ...
vuexdemo.zip
12-27
Vuex 是 Vue.js 生态系统中的一个核心库，专门用于管理 Vue 应用的状态。它遵循 Flux 的架构，提供了一种集中式的存储机制，使得在...在 `vuexdemo` 文件中，你可以找到一个简单的示例，帮助你快速理解和应用这些概念。
vuex的一个demo
08-10
通过学习和实践这个 Vuex 的 demo，你可以深入理解如何在 Vue.js 应用中有效地管理状态，提升应用的可维护性和可扩展性。同时，掌握 Vuex 也能帮助你在面试中展现出对 Vue.js 生态系统的深入理解，对于你的 IT 事业...
vuex（状态管理工具）的demo
05-01
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式及存储库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在这个"vuex 的 demo"中，我们可以通过分析 `src` ...
Duplicate keys detected ‘‘. This may cause an update error问题
热门推荐
crazywsp的博客
12-04 7万+
问题描述：Duplicate keys detected: ‘6’. This may cause an update error，但模板组件可以正常渲染。 产生该问题的原因是出现了重复的key，主要分为如下两种情况： 场景一： 报错如下： 由图可知，因为集合中的id有重复的值，当我们在 v-for 中使用id作为key时，即为报错，修改为使用index索引作为key，如下： <p v-for="(item, index) in list" :key="index">{{item.name}
Property or method “xx“ is not defined on the instance but referenced during render
crazywsp的博客
05-13 1万+
[Vue warn]: Property or method “activeNames” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. Property or method “
Uncaught (in promise) TypeError: Cannot read property ‘$message‘ of undefined
crazywsp的博客
07-14 6220
vue实例中this指的是vue本身，通过this就可以调用vue对象的所有api。 出现上述问题则说明，当前的this对象发生了改变，无法调用$message方法。 箭头函数并不简单是匿名函数的简写：在JS中，箭头函数和匿名函数有一个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定this对象指的是哪个对象。 monitorApi.updateRtsp(this.monitorCode).then(funct
vue 方法间传递数据对象参数
crazywsp的博客
12-17 4472
功能：将data对象作为参数传递给方法，在方法中对不同的参数进行相应操作。 如下，实现简单实现根据传入的不同p标签key对象，在相应p标签中显示相应内容： <template> <div> <!-- 可以通过如下两种方式绑定标签内容 --> <p>{{map.p1Content}}</p> <p>{{map.p2Content}}</p> <p>{{map.p3Content}
vue实现动态切换图片src
crazywsp的博客
12-30 4018
通过计算属性搭配require实现。 功能： 定义一个定时器，每隔3秒随机生成一个文件名；通过计算属性根据文件名重新加载图片路径，从而实现定时随机切换图片的效果。 图片路径：/assets/images/， 图片名称分别为1.png、2.png …20.png。 代码： <template> <div> <el-image :src="getImageUrl"></el-image> </div> </template&g
axios中qs用法
crazywsp的博客
05-18 1088
axios中的qs用法： 一、什么时候需要用qs进行序列化： axios默认的content-type是application/json,即json格式，后台可以使用字符串进行接收，然后再解析即可： 默认（不使用qs）： 发送请求： export const getOutList = params => { return service.post(launchReciveApiConfig.getOutList, params); } 后台接收：使用字符串接收后，通过json方法获取需要数
Property or method "addToReciveObjectList" is not defined on the instance but referenced during rend
crazywsp的博客
05-09 910
在使用vue时由于粗心遇到了一些问题，记录一下。 Property or method “addToReciveObjectList” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the propert
element ui+vue使用filters格式化日期时间
crazywsp的博客
12-05 732
定义日期格式化方法 目录：filters/index.js /** * @desc 时间格式化 * 将 2019-07-18T11:54:16.000+0000 格式化成类似 2019/07/18 11:54:16 * 可以指定日期和时间分隔符 * @param datetime 国际化日期格式 */ export function formatDatetime (datetime) { if (datetime != null) { const d
Vue Router 学习及demo
crazywsp的博客
08-21 381
Vue Router ： router的api： https://router.vuejs.org/zh/api/ 路由管理器，功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行...
写一个在vue2中使用vuex的demo
最新发布
06-03
好的，下面是一个简单的在Vue2中使用Vuex的demo： 1. 首先，需要安装vuex： ...以上就是一个简单的在Vue2中使用Vuex的demo，通过这个demo，我们可以学习到如何在Vue2中使用Vuex来管理组件的状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值