VueX插件使用

分类：Vue作者：编程之家用户

基础知识

VueX作用

　　 VueX是一个数据仓库，它可以管理多个组件公用的数据。

　　 没有学习VueX的时候，子组件要向父级组件传递信息则通过$emit()自定义事件，父组件如果要向子组件传递信息则通过props。

　　 这是一种单向的数据流，操纵起来比较麻烦。

　　

image-20201117223244106

　　 有了VueX一切都变得简单了，你只需要从VueX这个实例中中读取、操纵、修改模块仓库数据即可。

　　

image-20201117223616346

安装Vuex

　　 这里是VueX官方文档提供的安装方法：

　　 安装

　　 直接下载：

https://unpkg.com/vuex

　　 CDN引入：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

　　 NPM安装：

npm install vuex --save

state

定义仓库

　　 使用state来定义一个仓库：

    // 定义一个购物车模块，包含state仓库
    const cart = {
        state: {
            commodity: [
                {id: 1,name: "苹果手机",price: 399,num: 10},{id: 2,name: "苹果电脑",price: 1399,num: 21},]
        },}

    // 实例化出Vuex对象使用模块化管理该购物车模块
    const store = new Vuex.Store({
        modules: {
            cart,}
    })
    
    // 根组件中注册Vuex实例
    const app = new Vue({
        el: "#app",store,})

获取数据

　　 如果想要拿到这个数据仓库，则组件要通过计算属性进行获取：

return this.$store.state.模块名.仓库内容

　　 如下所示，子组件购物车进行内容展示：

　　

image-20201121230803945

<style>
    th,td {
        padding: 10px;
        text-align: center;
    }
</style>
<body>

<div id="app">
    <cart></cart>
</div>

<!--购物车子组件模板-->
<template id="cart">
    <div>
        <table v-if="goods.length>0" border="1px" :style="{borderCollapse:'collapse'}">
            <caption :style="{border:'1px solid #000',fontSize:'2rem'}">购物车</caption>
            <thead>
                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>价格小计</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in goods">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.num * item.price}}元</td>
                </tr>
            </tbody>
        </table>
        <h1 v-else>购物车没有任何商品</h1>
    </div>
</template>

<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
     // 定义一个购物车模块，包含state仓库
    const cart = {
        state: {
            commodity: [
                {id: 1,}
    })

    // 定义子组件
    Vue.component("cart",{
        template:`#cart`,// 通过计算属性获取仓库内容
        computed:{
            goods(){
                return this.$store.state.cart.commodity;
            }
        }
    })

    // 根组件中注册Vuex实例
    const app = new Vue({
        el: "#app",})
    
</script>

</body>

getters

数据计算

　　 如果我们要对仓库内容进行很复杂的计算，如在购物车下方添加上一个总价的话就需要在购物车模块中添加getters，并在其中定义方法。

　　 它类似与仓库的计算属性，使用也很简单，子组件通过计算属性调用getters中定义的方法：

this.$store.getters.模块getters中定义的方法名

　　 在getters中定义方法时，有一个必要参数state，它指向当前模块中的仓库state，如下所示：

    const cart = {
        state: {
     		...
        },getters: {
            totalPrice(state) {
     			...
            }
        }
    }

　　 代码如下，我们新增了一个组件用于专门显示总价，而不拘泥于某一个组件。

　　

image-20201121232026720

<style>
    th,td {
        padding: 10px;
        text-align: center;
    }
</style>
<body>

<div id="app">
    <cart></cart>
    <total-price></total-price>
</div>

<!--购物车子组件模板-->
<template id="cart">
    <div>
        <table v-if="goods.length>0" border="1px" :style="{borderCollapse:'collapse'}">
            <caption :style="{border:'1px solid #000',fontSize:'2rem'}">购物车</caption>
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>价格小计</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in goods">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td>{{item.num * item.price}}元</td>
            </tr>
            </tbody>
        </table>
        <h1 v-else>购物车没有任何商品</h1>
    </div>
</template>

<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
    // 定义一个购物车模块，包含state仓库
    const cart = {
        state: {
            commodity: [
                {id: 1,getters: {
            totalPrice(state) {
                return state.commodity.reduce((pre,cur) => {
                    return pre + cur.price * cur.num;
                },0);
            }
        }
    }

    // 实例化出Vuex对象使用模块化管理该购物车模块
    const store = new Vuex.Store({
        modules: {
            cart,{
        template: `#cart`,// 通过计算属性获取仓库内容
        computed: {
            goods() {
                return this.$store.state.cart.commodity;
            }
        }
    })

    Vue.component("totalPrice",{
        template: `
          <div><h1>总价:{{ totalPrice }}</h1></div>`,computed: {
            totalPrice() {
                return this.$store.getters.totalPrice
            }
        }
    })

    // 根组件中注册Vuex实例
    const app = new Vue({
        el: "#app",})

</script>

</body>

数量变更

　　 getters作为当前模块对仓库的计算属性，也是被动调用。

　　 当仓库中的商品数量发生改变后它会重新进行计算，如下所示：

　　

vuexgetters

 <td><button type="button" @click="item.num++" :style={marginRight:'5px'}>+</button>{{item.num}}<button @click="item.num++" type="button" :style={marginLeft:'5px'}>-</button></td>

mutation

操纵仓库

　　 如果我们要对仓库内容进行变更，如删除购物车中的某一项商品那就需要在购物车模块中添加mutation，并在其中定义方法。

　　 子组件通过methods与$store.commit()调用getters中定义的方法：

this.$store.commit('mutation中定义的方法',参数)

　　 在getters中定义方法时，有两个必要参数state与param，分别指向当前仓库和传入的数据，如下所示：

    const cart = {
        state: {
     		...
        },getters: {
            totalPrice(state) {
     			...
            }
        },mutations:{
        del(state,param) {
				...
			}
        }
    }

　　 代码如下，我们要删除购物车中的某一项商品。

　　

vuexmutation

<style>
    th,fontSize:'2rem'}">购物车</caption>
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>价格小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in goods">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button type="button" @click="item.num++" :style={marginRight:'5px'}>+</button>
                    {{item.num}}
                    <button @click="item.num++" type="button" :style={marginLeft:'5px'}>-</button>
                </td>
                <td>{{item.num * item.price}}元</td>
                <td>
                    <button type="button" @click="del(item.id)">删除商品</button>
                </td>
            </tr>
            </tbody>
        </table>
        <h1 v-else>购物车没有任何商品</h1>
    </div>
</template>

<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
    // 定义一个购物车模块，包含state仓库
    const cart = {
        state: {
            commodity: [
                {id: 1,0);
            }
        },mutations: {
            //删除购物车中的商品
            del(state,param) {
                // param传递过来的参数
                for (let i = 0; i < state.commodity.length; i++) {
                    if (state.commodity[i].id == param) {
                        state.commodity.splice(i,1); // splice是响应式的
                        break;
                    }
                }

            }
        }
    }

    // 实例化出Vuex对象使用模块化管理该购物车模块
    const store = new Vuex.Store({
        modules: {
            cart,// 通过计算属性获取仓库内容
        computed: {
            goods() {
                return this.$store.state.cart.commodity;
            }
        },// 通过methods与commit修改仓库内容
        methods: {
            del(id) {
                this.$store.commit("del",id);
            }
        }
    })

    Vue.component("totalPrice",})

</script>

</body>

actions

异步请求

　　 在上面我们都是模拟的数据，如果要异步向后端请求数据则可以通过在模块中定义actions与方法。

　　 在actions中定义方法时，有一个必要参数state，它指向当前的仓库，如下所示：

    const cart = {
        state: {
     		...
        },mutations:{
        	del(state,param) {
				...
			}
        }
        actions: {
            load(state) {
     			...
            }
        }
    }

　　 模块里actions中的方法需要通过$store.dispatch('方法名')触发，一般来说请求数据的流程如下：

  1. 在组件的钩子函数如created()或者mounted()中触发模块内actions中定义的异步请求数据方法load
  2. load方法再通过$store.commit()触发模块下mutation中定义的操纵仓库的方法，完成数据的更新

　　 代码演示：

　　

image-20201121234940763

　　 后端返回的数据：

    return JsonResponse(
        [
            {"id": 1,"name": "苹果手机","price": 399,"num": 10},{"id": 2,"name": "苹果电脑","price": 1399,"num": 21},{"id": 3,"name": "华为手机","price": 299,"num": 29},{"id": 4,"name": "华为电脑","price": 1099,"num": 3},],safe=False,)

　　 Vue代码中，使用axios发送异步请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

　　 完整代码如下：

<style>
    th,fontSize:'2rem'}">购物车</caption>
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>价格小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in goods">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button type="button" @click="item.num++" :style={marginRight:'5px'}>+</button>
                    {{item.num}}
                    <button @click="item.num++" type="button" :style={marginLeft:'5px'}>-</button>
                </td>
                <td>{{item.num * item.price}}元</td>
                <td>
                    <button type="button" @click="del(item.id)">删除商品</button>
                </td>
            </tr>
            </tbody>
        </table>
        <h1 v-else>购物车没有任何商品</h1>
    </div>
</template>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
    // 定义一个购物车模块，包含state仓库
    const cart = {
        state: {
            commodity: []
        },1); // splice是响应式的
                        break;
                    }
                }

            },// 设置商品
            setCommodity(state,param) {
                state.commodity = param.commodity
            }
        },actions: {
            load(store) {
                // 通过axios获取数据，然后再交给mutations操纵仓库，填充数据
                axios.post("http://127.0.0.1:8000/commodity/getAll/").then(function (response) {
                    store.commit('setCommodity',{commodity: response.data})
                })
            }
        }
    }

    // 实例化出Vuex对象使用模块化管理该购物车模块
    const store = new Vuex.Store({
        modules: {
            cart,id);
            }
        },// 钩子函数，组件初始化完成后调用，请求后台数据
        mounted() {
            this.$store.dispatch('load');
        }
    })

    Vue.component("totalPrice",})

</script>

</body>

modules

模块化管理

　　 上面的例子中，我们一直都再做模块化管理。

        // 购物车模块
        const cart = {
            state: {
				...           
            },getters: {
  				...
            },mutations: {
				...
            },actions: {
				...
            }
        }

        // 仓库
        const store = new Vuex.Store({
            modules: {
                cart,}
        })

　　 这代表你可以将购物车模块放到其他的一个文件中。

非模块化

　　 如果使用非模块化管理则是这个样子的：

const store = new Vuex.Store({
            state: {
                ...
            },getters: {
				...
            },actions: {
				...
            }
        })
        
 // 根组件 
        const app = new Vue({
            el: "#app",// 根组件中注册
        })

　　 非模块化和模块化还是有一些调用区别的。

调用区别

　　 当使用非模块化管理时，state仓库可以直接调用，而不用加模块名：

// 非模块化
return this.$store.state.仓库内容

// 必须加上模块名
return this.$store.state.模块名.仓库内容

　　 这是因为非模块化管理时，state是全局定义的，而使用模块化管理时state则变成了局部定义，所以要加模块名。

　　 其他的调用方式不变，他们依旧维持全局定义。

命名空间

　　 如果有多个模块，你想在调用某一个模块下的getters/mutation/actions所定义的方法时加上模块名的前缀，则需要添加命名空间。

　　 使用namespaced:true将getters/mutation/actions定义成局部方法：

const cart = {
	namespaced:true,// 添加命名空间后，getters/mutation/actions都将变成局部的
    state: {
    	...           
    },getters: {
    	...
    },mutations: {
    	...
    },actions: {
    	...
    }
        }

　　 对应的调用方式也要变：

this.$store.dispatch('actions下定义的方法');
变为
this.$store.dispatch('模块名/actions下定义的方法');

this.$store.getters.getters下定义的方法;
变为
this.$store.getters['模块名/getters下定义的方法'];

this.$store.commit('mutation下定义的方法',参数)
变为
this.$store.commit('模块名/mutation下定义的方法',参数)

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Vuex- Action的 { commit }的写法
https://segmentfault.com/a/1190000022018995 https://www.jianshu.com/p/8c3599dda094 vuex教程中，有这样一句话和这样一段代码： 实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commi
ES6模块之export和import详解
ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的文件，在这个模块中所有的变量都对其他模块是不可见的，除非我们导出它。 ES6的模块系统大致分为导出（export）和导入（import）两个模块。 1、模块导出（export） 可以 导出 所有的最外层 函数 、 类
Vue知识点汇总（含Vue3）
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ Vue知识点汇总（含Vue3） 一、Vue 基础 1. Vue的基本原理 当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使
npm init vite@latest vue3study --template vue
D:\Temp&gt;npm init vite@latest vue3study --template vuenpm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! network request to https://registry.np
Vue 中使用消息总线让两个滚动条同步滚动
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动这就涉及到子组件之间的互相通信，通过 消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥store.jsimport Vue from 'vue'export let store = Vue.observable({ scrollFlag: true})export let mutations =.._vue 能不能同时有两个滚动事件
Vue + lodop 静默打印
文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简单来说就是不需要用户点击"打印"，自动去打印，但是使用浏览器web打印不可避免的要弹出以下画面面对这种问题也只能用"富客户端"技术来解决，在浏览器的沙盒安全模型中无法做到，那么只能使用插件的技术，这个我们就不自己花力气去做了，我找来了 lodop 这个免费的打印组件，功能还是挺强大的，下载下图的发行包解压后安装下图两个exe如果你的系统是64位的，可以安装install_lodop64.exe上图的LodopFuncs.js 是客户端要使用的核心库文件..._this.$getlodop().then((lodop) =>{
Vue + DataV + SignalR 数字化大屏展示
文章浏览阅读1.7k次。个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 DataV (不是阿里的那个DataV哈，具体链接在这里)开发了一个大屏展示，使用了css flex弹性布局，使用了DataV的一些比较酷炫的边框(SVG写的)，基本上功能没有全部完成，但是模子已经刻出来了，只是后端推送的内容没有全部写出来前端<template> <dv-full-screen-container class="screen-container"> <div class="ti_用signalr做一个简单的实时大屏显示
vue 下使用 exceljs + x-spreadsheet 带样式导入Excel
文章浏览阅读3.4k次，点赞3次，收藏10次。【说明】导入的Excel 字体颜色和背景色只能识别【标准色】,别的如"主题颜色"，exceljs 解析出来不是颜色值。导入的样式包括字体，字号，列宽，合并单元格，【部分能识别】的背景色，文字颜色。导入到 x-data-spreadsheet 如下图。原Excel样式如下。_x-data-spreadsheet
element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次
文章浏览阅读1.7k次。之前参考某文章把 router-view 放在 el-tab-pane 外面都不起作用，问题根本不是出在 el-tab-pane，而是v-for 里面有多个route-view , keep-alive 时 tab 并未销毁掉，而是缓存隐藏了起来。需要把 router-view 的 name 与路由的 index.js 名称对应起来。之前参照很多文章修改试图修正这个问题，结果都徒劳，终于让我找到。我做了如下修改，主页面 main.vue。_el-tab-pane 后面接router-view
解决npm下载包的时候发生的依赖冲突
文章浏览阅读533次。今天在一台虚拟机上面运行老项目，报各种类型上图的错误提示，一开始还以为是less的问题，结果一个个装完还是报错，后面又说webpack, webpack cli有问题，头有点大了，google 一下，发现一个命令。讨论这个命令的文章，可以了解一下。运行以后终于出现了期待已久的。_npm install 忽略依赖
Vue2.0 组件实现动态模板(即Template)
文章浏览阅读8k次，点赞3次，收藏12次。从这篇文章得到启发先定义一个组件从外部接收Template，然后在组件里调用<template > <div ref="markedContent"></div></template><script>import Vue from 'vue/dist/vue.esm.js'export default { name: 'wf-marked-content', props: ['content'], mounte.._vue components 动态传入模板
Vue中使用froala富文本编辑器制作打印模板 + print.js 打印
文章浏览阅读5.4k次。参考上一篇知识开发的一个功能，制作一个打印模板的管理模块，如下(就是保存froala编辑后的html文本，其中包括Vue的Template，这样我们可以利用Vue的模板的优势来动态绑定一些数据源进行HTML的打印,基本上跟过去水晶报表做一个模板再绑定数据源的方法异曲同工)在 main.js 里引用 froala 组件// Import and use Vue Froala lib.import VueFroala from 'vue-froala-wysiwyg'// 引入 Fr.._vue设计网页打印模板
Vue3 使用 script-setup 语法糖
文章浏览阅读992次。计划是这样,公司的项目一直在持续改动,安装包总是需要频繁生成新的,由此我想到了"持续集成"!有自动化工具不用,岂不可惜?这周的主要时间就用来学习CruiseControl.Net全面实现持续集成_怎么在vue的 script部分使用 eldigloa
拿来改造主义，Vue + Element UI + Less 做了一个拖拽条
文章浏览阅读1.2k次。其实Element UI 只用了文字提示的 el-tooltip 组件，不喜欢可以去掉，不记得是从哪拿到的原始代码，我给加了高亮渐变显示，图标，和拖拽时只能拖拽图标的位置，效果如上图，可以水平方向拖动，也可以垂直方向拖动。样式是less写的，css写嵌套样式太繁琐了。拿来主义，改造有理!下面贴代码<template> <div ref="splitPane" class="split-pane" :class="direction" :"{ fl..._element ui拉条样式
vue 下使用 exceljs + x-spreadsheet 带样式导出Excel
文章浏览阅读953次，点赞2次，收藏2次。接上一篇，这次加入的是从x-speadsheet导出Excel，并且带有x-speadsheet中的样式，重点关注 exportExcel 这个方法，我加入了 tinycolor 这个库用来翻译颜色值，值得注意的是， exceljs的颜色值是 argb 不是 rgba，一定不要弄混了a 是代表的透明度放在最前面_x-data-spreadsheet 导出
Vue 动态连接线
文章浏览阅读5.5k次，点赞2次，收藏21次。尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果..._vue 连线
安装 Element UI 3.0 （即 Element UI Plus） 正确方法
文章浏览阅读4.2k次，点赞2次，收藏5次。首先官网推荐的安装方法没有生成dist文件，导致样式表等这些文件并没有生成npm install element-plus --save以上方法是有问题的，如果不幸执行了上面的命令，那么先执行卸载npm uninstall element-plus删除 main.js文件对element ui的引用，输入以下命令vue add element-plus..._elementui3.0
Vue + Element UI 实现了一个周选择器
文章浏览阅读3.1k次。如上图，下面贴代码<template> <div> <el-date-picker size="large" style ="width:120px" v-model="selectYear" format="yyyy 年" value-format="yyyy" type="year" :clearable = "false" placeholder="选择年">.._vue多选周
自己开发的 Vue 下的甘特图 组件 已上传到GitHub上
文章浏览阅读1.8k次，点赞6次，收藏6次。经过 2021年的一个春节，从年前到现在，大致撸出一个 甘特图，进度条是用SVG画的，使用了几个工具库 （interactjs 用来处理拖拽和修改尺寸，snap.svg 用来处理 svg 的dom 操作，moment.js用来处理时间的操作），其他没有依赖任何的UI组件，目前初见雏形，还比较粗糙，后面会不断更新源码地址点击期间也摸索了怎么把vs code的项目上传到 GitHub 上面进行源代码的管理，基本上是参考的这篇文章做的..._vue gantt demo
封装 x-spreadsheet 带样式导入导出
文章浏览阅读2.1k次。接上两篇vue 下使用 exceljs + x-spreadsheet 带样式导入Excelvue 下使用 exceljs + x-spreadsheet 带样式导出Excel下面封装好一个组件调用组件的页面效果如图，目前“导出Json”还没有做_x-spreadsheet导入导出
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot