Vuex实现数据共享

这篇具有很好参考价值的文章主要介绍了Vuex实现数据共享。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一:index.js的创建

二:index.js的引入

三:Count.vue

四:App.vue的使用

五:mapstate等的使用

五:多组件数据共享(模块化编程)


vc通过dispatch联系actions,actions通过commit联系mutations。

Mutations可以通过Mutate修改State。

Vuex小案例

Vuex实现数据共享

一:index.js的创建

src/store/index.js的创建

import Vuex from 'vuex'
import Vue from 'vue'
const actions = {
    jiaOdd(context,value){
        if(context.state.sum % 2){
            context.commit('JIA',value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit('JIA',value);
          }, 500);
    }
}
const mutations = {
    JIA(state,value){
        state.sum+=value;
    },
    JIAN(state,value){
        state.sum-=value;
    }
}
const state = {sum: 0,school:'中北大学',sname:'任彪煜'}
const getters = {
    bigSum(state){
        return state.sum * 10;
    }
}
Vue.use(Vuex)
const store = new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
})
export default store;

二:index.js的引入

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js';
Vue.config.productionTip = false;
//创建vm
new Vue ({
    render:h=>h(App),
    store,
}).$mount('#app')

三:Count.vue

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h1>扩大值为:{{ bigSum }}</h1>
    <h2>{{ sname }}</h2>
    <h2>{{ school }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="ind">+</button>
    <button @click="de">-</button>
    <button @click="cur">奇数加</button>
    <button @click="wait">等一等加</button>
  </div>
</template>

<script lang="ts">
import { mapState, mapGetters } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    ind() {
      this.$store.commit("JIA", this.n);
    },
    de() {
      this.$store.commit("JIAN", this.n);
    },
    cur() {
      this.$store.dispatch("jiaOdd", this.n);
    },
    wait() {
      this.$store.dispatch("jiaWait", this.n);
    },
  },
  computed: {
    ...mapState(["sum", "school", "sname"]),
    ...mapGetters(["bigSum"]),
  },
};
</script>

四:App.vue的使用

<template>
  <div>
    <Count />
  </div>
</template>
<script>
import Count from "./components/Count.vue";
export default {
  name: "App",
  components: {
    Count,
  },
};
</script>
<style>
button {
  margin-left: 5px;
}
</style>

五:mapstate等的使用

Vuex实现数据共享

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h1>扩大值为:{{ bigSum }}</h1>
    <h2>{{ sname }}</h2>
    <h2>{{ school }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="ind(n)">+</button>
    <button @click="de(n)">-</button>
    <button @click="cur(n)">奇数加</button>
    <button @click="wait(n)">等一等加</button>
    <hr />
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  // methods: {
  //   ind() {
  //     this.$store.commit("JIA", this.n);
  //   },
  //   de() {
  //     this.$store.commit("JIAN", this.n);
  //   },
  //   cur() {
  //     this.$store.dispatch("jiaOdd", this.n);
  //   },
  //   wait() {
  //     this.$store.dispatch("jiaWait", this.n);
  //   },
  // },
  computed: {
    ...mapState(["sum", "school", "sname", "personList"]),
    ...mapGetters(["bigSum"]),
  },
  methods: {
    ...mapActions({ cur: "jiaOdd", wait: "jiaWait" }),
    ...mapMutations({ ind: "JIA", de: "JIAN" }),
  },
};
</script>

五:多组件数据共享(模块化编程)

App.vue和main.js和上面一样

index.js

import Vuex from 'vuex'
import Vue from 'vue'
import { name } from 'pubsub-js';

const personeExm = {
    namespaced: true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD',value);
            }
        }
    },
    mutations:{
        ADD(state,value){
        state.personList.unshift(value)
        }
    },
    state:{
        personList:[
        {id:'001',name:'张三'},
        {id:'002',name:'李四'}
        ]
    },
    getters:{
        getFirstName(state){
            return state.personList[0],name;
        }
    }
}
const numberExm={
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            if(context.state.sum % 2){
                context.commit('JIA',value);
            }
        },
        jiaWait(context,value){
            setTimeout(() => {
                context.commit('JIA',value);
              }, 500);
        }
    },
    mutations:{
        JIA(state,value){
            state.sum+=value;
        },
        JIAN(state,value){
            state.sum-=value;
        },
    },
    state:{
        sum: 0,
        school:'中北大学',
        sname:'任彪煜',
    },
    getters:{
        bigSum(state){
            return state.sum * 10;
        }
    }
}
Vue.use(Vuex)
const store = new Vuex.Store({
    modules:{
        person:personeExm,
        number:numberExm
    }
});
export default store;

Count.vue

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h1>扩大值为:{{ bigSum }}</h1>
    <h2>{{ sname }}</h2>
    <h2>{{ school }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="ind(n)">+</button>
    <button @click="de(n)">-</button>
    <button @click="cur(n)">奇数加</button>
    <button @click="wait(n)">等一等加</button>
    <hr />
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  // methods: {
  //   ind() {
  //     this.$store.commit("JIA", this.n);
  //   },
  //   de() {
  //     this.$store.commit("JIAN", this.n);
  //   },
  //   cur() {
  //     this.$store.dispatch("jiaOdd", this.n);
  //   },
  //   wait() {
  //     this.$store.dispatch("jiaWait", this.n);
  //   },
  // },
  computed: {
    ...mapState("number", ["sum", "school", "sname"]),
    ...mapState("person", ["personList"]),
    ...mapGetters("number", ["bigSum"]),
  },
  methods: {
    ...mapActions("number", { cur: "jiaOdd", wait: "jiaWait" }),
    ...mapMutations("number", { ind: "JIA", de: "JIAN" }),
  },
};
</script>

Person.vue文章来源地址https://www.toymoban.com/news/detail-444590.html

<template>
  <div>
    <h1>count组件中的sum{{ sum }}</h1>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add()">添加</button>
    <button @click="addPerson()">添加王</button><br />
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
    <h1>第一个人的名字{{ getFirstName }}</h1>
  </div>
</template>

<script lang="ts">
import { nanoid } from "nanoid";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  methods: {
    add() {
      const perobj = { id: nanoid(), name: this.name };
      this.$store.commit("person/ADD", perobj);
      this.name = "";
    },
    addPerson() {
      const perobj = { id: nanoid(), name: this.name };
      this.$store.dispatch("person/addPersonWang", perobj);
      this.name = "";
    },
  },
  computed: {
    ...mapState("person", ["personList"]),
    ...mapState("number", ["sum"]),
    ...mapGetters("person", ["getFirstName"]),
  },
};
</script>

<style scoped></style>

到了这里,关于Vuex实现数据共享的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序MobX创建store并实现全局数据共享

    没有package.json文件输入 npm init -y 初始化一下,初始化一个包管理 npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 .js文件 此时可以在页面中用{{}}使用store中的数据 使用store中的action方法 页面绑定一个方法,并且使用 data-* 进行传参 在js中使用 打印 点击之后就可以是页面

    2024年02月16日
    浏览(43)
  • Centos下,使用NFS实现目录共享/网络驱动器

    Linux系统下,也可以像windows一样通过目录共享实现网络驱动器模式访问。具体操作步骤如下: 一、服务端: 1、确认下服务端系统是否已安装 NFS rpm -qa nfs-utils rpcbind 如果没有,安装 NFS 服务 yum install -y nfs-utils rpcbind 2、创建共享目录 mkdir -p /data/share chmod 666 /data/share 3、修改

    2024年01月18日
    浏览(49)
  • 数据备份与还原,(mysqldump,source)索引(index),创建视图(view)

    一、备份与还原 1、使用mysqldump命令备份数据库中的所有表 2、备份booksDB数据库中的books表 3、使用mysqldump备份booksDB和test数据库 4、使用mysqldump备份服务器中的所有数据库 5、使用mysql命令还原第二题导出的book表 6、进入数据库使用source命令还原第二题导出的book表 索引 1、建立

    2024年02月15日
    浏览(38)
  • Vue 2和Vue 3路由Router创建的区别简记(在main.js文件中引入的区别和router的js文件中创建语法的区别)

    1、版本的搭配: Vue 2到Vue 3的改版升级,同样的带来Vue Router的升级。创建Vue项目之后,我们可以在package.json文件中看到,Vue 2创建的项目往往是与Vue Router 3.X版本搭配的,而Vue 3创建的项目与Vue Router 4.X版本搭配。 Vue 3搭配Vue Router 4.X版本: Vue 2搭配Vue Router3.X版本: 2、在main

    2024年02月08日
    浏览(60)
  • fabric.js 实现元素拖拽、引入图片、标注交互

    by:垃圾程序员 特别鸣谢:拿只键盘出来绣花的德育处主任,他的系列文章给了我很大的帮助。该说不说,站在前人的肩膀上就是得劲。 德育处主任 - 知乎 拿只键盘出来绣花 回答数 7,获得 143 次赞同 https://www.zhihu.com/people/rabbit-svip fabric.js 是一个用于创建可交互式的 HTML5

    2024年04月12日
    浏览(44)
  • vsCode实现引入js文件的代码提示插件推荐

    在html文件中,通过src引入独立的js文件时实现代码提示。 如,js文件中定义了一个demo函数,在1.html文件中,引入这个js文件后,在js代码块里面,输入d就会有提示demo函数候选项,太方便了。 插件: Html Embedded Javascript 在vscode插件商店中直接搜索安装,不用配置;

    2024年02月16日
    浏览(43)
  • vue3项目引入本地js文件,实现一个音频播放按钮

    目前有一个需求就是在网页上放置一个音乐控制按钮,并且是在vue3项目里面。于是小白的我遇到了2个问题,第一个问题是如何实现没有进度条的播放按钮,这个网上有现成的代码,可以通过js代码切换不同的图片或者是别的样式,并不算难;第二个问题是如何在vue3项目中引

    2024年02月19日
    浏览(57)
  • 【数据结构】栈——共享栈、链栈(入栈 出栈 判空 创建 读栈顶元素)完整代码

    只允许在一端进行插入操作或删除的线性表。 重要术语 栈顶:允许 插入和删除的一端。 栈底:不允许 插入删除的一端。 空栈:不含任何元素的空表。 出栈顺序(卡特兰数): n个不同元素进栈,出栈元素不同排列的个数: 1 n + 1 C 2 n n frac{1}{n+1} quad C_{2n}^n n + 1 1 ​ C 2 n n ​

    2024年02月11日
    浏览(38)
  • 10 使用Vue+axios+Vuex实现登录后前端数据本地化存储实战

    这已经是《 Vue + SpringBoot前后端分离项目实战 》专栏的前端部分第8篇博客了, 服务端部分 由天哥(天哥主页)负责,目前专栏目录如下: Vue + SpringBoot前后端分离项目实战 - 前端部分 1. 手把手带你做一套毕业设计-征程开启 2. 我应该把毕业设计做到什么程度才能过关? 3

    2024年02月16日
    浏览(41)
  • 微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理

    首先 我们打开终端 引入依赖 然后 如果你是新版开发者工具 就 构建一下 如果你是 老版本的 微信开发者工具 就打开右上角详情 选择本地管理 勾选 使用 npm 模块 然后 在根目录下创建一个 store.js 当然建在哪是你自己决定的 反正 后面能引入到就好 然后 store.js 编写代码如下

    2024年02月05日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包