Vue2.x中Vuex的多种写法

最新推荐文章于 2024-03-22 12:19:16 发布
最新推荐文章于 2024-03-22 12:19:16 发布
阅读量938 收藏 5
点赞数
分类专栏： Vue2.x 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46013619/article/details/119581024
版权
  1. 首先安装Vuex
yarn add vuex
  1. 在main中引入并且在新建的store文件夹下的index.js文件中使用use注册，至此所有VueComponent、Vue实例中都可以看见$store
main.js
import Vue from "vue";
import App from "./App.vue";
import store from "@/store";
Vue.config.productionTip = false;
new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");

index.js
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
const state = {};
const actions = {};
const getters = {};
const mutations = {};
export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations,
});
  1. 此处我们采用最简单的加减来演示不同的写法，不记录$sotre.的写法
store-->index.js
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
const state = {
  count: 0,
};
const actions = {
  addCount(context, value) {
    context.commit("ADD_COUNT", value);
  },
};
const getters = {
  expandCount(state) {
    return state.count * 10;
  },
};
const mutations = {
  ["ADD_COUNT"](state, value) {
    state.count += value;
  },
};
export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations,
});

mapState相当于

storeCount(){
	return this.$store.state.count
}
  • 第一种对象写法 key value
<template>
  <div>
    <div>
      <span>{{ storeCount }}</span>
    </div>
    <button @click="onAddCount">点我加1</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    //第一种对象写法 key value
    ...mapState({ storeCount: "count" }),
  },
  methods: {
    onAddCount() {
      this.$store.dispatch("addCount", 1);
    },
  },
};
</script>
  • 第二种数组写法（用于同名）
<template>
  <div>
    <div>
      <span>{{ count }}</span>
    </div>
    <button @click="onAddCount">点我加1</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    //第二种数组写法
    ...mapState(["count"]),
  },
  methods: {
    onAddCount() {
      this.$store.dispatch("addCount", 1);
    },
  },
};
</script>

mapGetters使用方法等同mapState

mapActions使用方法同mapMutations，此处以mapMutations为例

  • 第一种对象写法
<template>
  <div>
    <div>
      <span>{{ count }}</span>
      <span>{{ expandCount }}</span>
    </div>
    <button @click="onAddCount(1)">点我加1</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["expandCount"]),
  },
  methods: {
    //基础写法 onAddCount不必在template中传参,
    // onAddCount() {
    //   this.$store.commit("ADD_COUNT", 1);
    // },

    // mapMutations相当于 这就导致要在template中点击按钮的时候传入参数
    // onAddCount(value) {
    //   this.$store.commit("ADD_COUNT", value);
    // },

    // 对象写法
    ...mapMutations({ onAddCount: "ADD_COUNT" }),
  },
};
</script>
  • 第二种数组写法
<template>
  <div>
    <div>
      <span>{{ count }}</span>
      <span>{{ expandCount }}</span>
    </div>
    <button @click="ADD_COUNT(1)">点我加1</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["expandCount"]),
  },
  methods: {
    //基础写法 onAddCount不必在template中传参,
    // onAddCount() {
    //   this.$store.commit("ADD_COUNT", 1);
    // },

    // mapMutations相当于 这就导致要在template中点击按钮的时候传入参数
    // onAddCount(value) {
    //   this.$store.commit("ADD_COUNT", value);
    // },

    // 对象写法
    // ...mapMutations({ onAddCount: "ADD_COUNT" }),
    //数组写法
    ...mapMutations(["ADD_COUNT"]),
  },
};
</script>

Vuex模块化
重构store中index.js代码，此处为了简便，不单独拆分文件

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);

const addOptions = {
  //开启命名空间，因为getters actions不区分模块
  namespaced: true,
  state: {
    count: 0,
  },
  actions: {
    addCount(context, value) {
      context.commit("ADD_COUNT", value);
    },
  },
  getters: {
    expandCount(state) {
      return state.count * 10;
    },
  },
  mutations: {
    ["ADD_COUNT"](state, value) {
      state.count += value;
    },
  },
};

const subOptions = {
  namespaced: true,
  state: {
    count: 0,
  },
  actions: {
    subCount(context, value) {
      context.commit("SUB_COUNT", value);
    },
  },
  getters: {
    expandCount(state) {
      return state.count * 10;
    },
  },
  mutations: {
    ["SUB_COUNT"](state, value) {
      state.count -= value;
    },
  },
};

export default new Vuex.Store({
  modules: {
    customAdd: addOptions,
    customSub: subOptions,
  },
});
  • mapState基础实现
<template>
  <div>
    <div>
      <span>{{ customAdd.count }}</span>
    </div>
    <!-- <button @click="onAddCount">点我加1</button> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
  	//取自store下index.js中modules的key
    ...mapState(["customAdd"]),
  },
  methods: {
    // onAddCount() {
    //   this.$store.dispatch("addCount", 1);
    // },
  },
};
</script>

展开$store看下现在的格式，所以要在template中采用customAdd.count去取值
在这里插入图片描述

  • 进阶写法

这种写法必须在store下index.js开启namespaced:true才可以生效

<template>
  <div>
    <div>
      <span>{{ count }}</span>
    </div>
    <!-- <button @click="onAddCount">点我加1</button> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    ...mapState("customAdd", ["count"]),
  },
  methods: {
    // onAddCount() {
    //   this.$store.dispatch("addCount", 1);
    // },
  },
};
</script>
  • mapMutations和mapState相似
<template>
  <div>
    <div>
      <span>{{ count }}</span>
    </div>
    <button @click="onAddCount(1)">点我加1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    ...mapState("customAdd", ["count"]),
  },
  methods: {
    ...mapMutations("customAdd", { onAddCount: "ADD_COUNT" }),
  },
};
</script>
  • mapGetters、mapActions、mapMutations、mapState都相似写法
<template>
  <div>
    <div>
      <span>{{ count }}</span>
      <span>{{ expandCount }}</span>
    </div>
    <button @click="onAddCount(1)">点我加1</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    ...mapState("customAdd", ["count"]),
    ...mapGetters("customAdd", ["expandCount"]),
  },
  methods: {
    ...mapActions("customAdd", { onAddCount: "addCount" }),
  },
};
</script>
  • 不借助map，初始化写法如何写？整合展示，只有getters有些特别，展开getters，与state结构不同
    在这里插入图片描述
<template>
  <div>
    <div>
      <span>{{ count }}</span>
      <span>{{ expandCount }}</span>
    </div>
    <button @click="onAddCount">点我加1</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  computed: {
    count() {
      return this.$store.state.customAdd.count;
    },
    expandCount() {
      return this.$store.getters["customAdd/expandCount"];
    },
  },
  methods: {
    onAddCount() {
      // this.$store.commit("customAdd/ADD_COUNT", 1);
      this.$store.dispatch("customAdd/addCount", 1);
    },
  },
};
</script>
写bug的小气球
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.x-vuex-demo:vue2.x + vuex演示
04-27
维德莫斯 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vueSocketChatroom：vue2.x + vue-router2.x + vuex2.x + vux2.x + express + socket.io立即聊天室
02-05
为代码编辑器安装eslint插件（例如vscode中的“ eslint”） 下载 # clone git clone [email protected]:Chanran/vueSocketChatroom.git cd vueSocketChatroom # install dependencies npm install -d 开始 npm run dev ...
vuex
weixin_41034171的博客
01-17 199
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用: 首先要安装、使用 vuex 首先在 vue 2.0+ 你的vue-cli项目中安装 vuex ...
【Vuex】Vuex详解，一篇文章搞懂Vuex详细使用过程和代码编写
最新发布
qq_63586399的博客
03-22 771
实现组件全局（数据）管理的一种机制，可以方便的实现组件之间共享数据，不同于上述三种传递值的方式。可以把vuex当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。
vuex的写法
马大哈的博客
07-20 312
vuex
关于vueX 及 对应写法
dreamy_wx的博客
02-19 311
不使用 vuex 写法示例待定 <script> import request from '../../utils/request.js' export default { data() { return { initData:'初始化数据', indexData:{} }; }, computed:{ }, methods:{ async getIndexData(){ le
vuex入门教程
java技术博客
03-26 467
vuex入门教程 参考网址: https://mp.weixin.qq.com/s/rs2xAvsY8SYtrMchz88dlQ 说明 vuex 对于 vue 来说 , 也是很重要的组件 , 但是项目是否使用 vuex 看情况而定 , 不是为了使用 vuex 而使用 vuex vuex , vue-router , axios 基本都是 vue-cli 中必不可少的组件 , 加上 UI 组件 element-ui , 基本就可以完成一个简单的项目了 这篇文章很好的介绍了 vuex 的使用 , 通俗易懂
最详细的Vuex教程
weixin_30325487的博客
07-19 1368
原文链接http://blog.csdn.net/h5_queenstyle12/article/details/75386359 最详细的Vuex教程 什么是Vuex？ vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。 引入Vuex（前提是...
VUEX总结
qq_45954420的博客
03-07 336
1.概念 专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中的管理（读/写）， 也是组件间的通信方式，且适用于任意组件间通信 2.什么时候用vuex：（共享） 多个组件依赖于同一状态 来自不同组件的行为需求变更同一状态 3.搭建vuex环境 (1).创建文件：src/store/index.js // 引入vue import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' // 使用vue
vue2.x+vue-router2.x+vuex 2.x常用的vue开发项目模板.zip
01-16
vue2.x+vue-router2.x+vuex2.x+webpack+stylus+node+axios+mock+mongoose+bcrypt 常用的vue开发项目模板 软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目...
Vue 2.X的状态管理vuex记录详解
01-19
在Vue2.X中使用vuex的情况： 　1、多个视图依赖于同一状态， 比如验证登陆情况。 　2、来自不同视图的行为需要变更同一状态 ， 　3、不在一个组件树（不是父子组件的关系），组件间频繁的进行数据和状态的传递，...
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch侦听器、Vue3集成Sass、Vue3.x todolist 待办事项、Vue3中的单文件组件、Vue3.x
Vuex的创建和简单使用
简单点的博客
02-20 1715
Vuex的创建和简单的使用
Vuex · 写法
weixin_33896726的博客
06-12 339
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 1. 根目录下新建 vuex 目录，在 vuex 目录下创建 index.js 定义状态值 import Vue from 'vue' import Vuex from 'vuex'; Vue.use(Vuex); export def...
vue2.x中使用vuex
文龙刚的博客
02-10 1132
vue2.x中使用vuex
Vue2.x
l_537的博客
08-18 762
Vue2.x入门，涵盖大部分知识点
vue2.x之vuex module模块学习笔记（二）
黄彪博客
08-15 1265
文章目录文章参考问题描述学习条件如何使用命名空间定义的vuex module要设置namespaced: true,自定义的Vuex module对象要挂载在 modules属性下vuex模块文件管理state 文件mutations 文件actions 文件getters 文件moduleIndex 文件Vue界面关联 文章参考 https://vuex.vuejs.org/zh/guide/...
Vuex命名空间的所有写法
dy1717的博客
12-30 1638
Vuex命名空间
Vue.use(Vuex) use未定义
05-29
这个错误通常发生在Vue项目中使用Vuex时，是因为没有正确引入Vuex或者没有在Vue实例中使用Vue.use(Vuex)。 你可以尝试在你的Vue项目中使用以下代码引入Vuex并且在Vue实例中使用Vue.use(Vuex)： ``` import Vuex ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值