VueX 使用

于 2024-08-18 11:15:52 发布
阅读量107 收藏 2
点赞数 5
分类专栏： Vue2 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53374893/article/details/141285281
版权

1.简介

就是用来多组件共享数据的实现用的

  

2.使用VueX

 因为使用的是vue2 所以下的是vuex3 若是vue3 必须下的是 vue4  

npm i vuex@3

3.搭建环境

1.创建 src/store/index.js

//该文件用于创建一个Vuex中最为核心的store

//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'
//准备 actions - 用于响应组件中的动作
const actions = {}

//准备 mutations - 用于操作数据(state)
const mutations = {}


//准备 state - 用于存储数据
const state = {}

Vue.use(Vuex)

//创建 store
const store = new Vuex.Store({
    actions,
    mutations,
    state
});

//暴露store
export default store;

2.main.js引入

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource
import vueResource from 'vue-resource'

//引入store
import store from './store/index'

//关闭Vue的生产提示
Vue.config.productionTip = false

//应用插件
// import plugins from './plugins'
//使用插件
// Vue.use(plugins,1,3,2,5,6)

// const d = Vue.extend({}); 

// Vue.prototype.eventBus= new d();

//使用插件
Vue.use(vueResource)


//创建vm
new Vue({
    el: '#app',
    render: (h) => h(App),//放入构造出 App组件模板
    store,
    beforeCreate() {
        Vue.prototype.$bus = this; //安装全局事件总线
        // console.log(this);

    }
})

3.使用

store 下 建 index.js

//该文件用于创建一个Vuex中最为核心的store

//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'
//准备 actions - 用于响应组件中的动作
const actions = {
    jia(context,value){
        console.log('actions中的jia被调用了',context ,value);
        context.commit('JIA',value);
        
    },
    jian(context,value){
        console.log('actions中的jian被调用了',context ,value);
        context.commit('JIAN',value);
        
    },
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了',context ,value);
        if(context.state.sum % 2){
            context.commit('JIA',value);
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了',context ,value);
        setTimeout(() => {
            context.commit('JIA',value);
        }, 1000);
    }
}

//准备 mutations - 用于操作数据(state)
const mutations = {
    JIA(state,value){
        console.log('mutations中的jia被调用了',state ,value);
        state.sum+=value;
    },
    JIAN(state,value){
        console.log('mutations中的jian被调用了',state ,value);
        state.sum-=value;
    }
}


//准备 state - 用于存储数据
const state = {
    sum:0,
}

Vue.use(Vuex)

//创建 store
const store = new Vuex.Store({
    actions,
    mutations,
    state
});

//暴露store
export default store;

4.在组件中调用

<template>
  <div>
    <h2>当前求和为:{{ $store.state.sum }}</h2>
    <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: "CountComponent",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    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 scoped>
button {
  margin-left: 5px;
}
</style>

4.getters的使用

相当于全局的计算属性

 5.mapActions mapGetter mapState mapMutations

 

6. 多组件共享数据

直接调用里面的数据就行，都是共享的

7.模块化加命名空间

<template>
  <div>
    <h2>当前求和为:{{ sum }}</h2>
    <h2>当前求和放大10倍为:{{ bigSum }}</h2>
    <h2>我在{{ school }} 学习 {{ subject }}</h2>
    <h2>Persion组件的总人数是:{{personList.length}}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="jiaOdd(n)">当前求和为奇数再加</button>
    <button @click="jiaWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "CountComponent",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    ...mapState('countAbout',["sum", "school", "subject"]), //同名就可以这样写
    ...mapState('personAbout',['personList']), //同名就可以这样写
    ...mapGetters('countAbout',["bigSum"]),
  },
  methods: {
    ...mapMutations('countAbout',["JIA", "JIAN"]),
    ...mapActions('countAbout',["jiaOdd", "jiaWait"]),
  }

};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>

 

<template>
  <div>
    <h1>人员列表</h1>
    <h1>Count组件求和为:{{sum}}</h1>
    <h3>列表中第一个人的名字是{{firstPersonName}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addOfNet">添加一个网络请求的人</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name:'PersonComponent',
  data() {
    return {
      name:''
    }
  },
  computed:{
    personList(){
      return this.$store.state.personAbout.personList;
    },
     sum(){
      return this.$store.state.countAbout.sum;
    },
    firstPersonName(){
      return this.$store.getters['personAbout/firstPersonName'];
    }
  },
  methods:{
      add(){
          const personObj = {id:nanoid(),name:this.name};
          console.log(this.$store);
          this.$store.commit('personAbout/ADD_PERSON',personObj)
          
      },
      
      addWang(){
          const personObj = {id:nanoid(),name:this.name};
          console.log(this.$store);
          this.$store.dispatch('personAbout/addPersonWang',personObj)
          
      },
       addOfNet(){
          this.$store.dispatch('personAbout/addPersonServer')
          
      }
  }
}
</script>

<style>

</style>
//该文件用于创建一个Vuex中最为核心的store

//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'

import countOptions from './count'
import persionOptions from './person'




Vue.use(Vuex)

//创建 store
const store = new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: persionOptions
    }
});

//暴露store
export default store;
//人员管理相关配置
import axios from "axios";
import { nanoid } from "nanoid";
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value);
            }
        },
        addPersonServer(context){
            axios.get('http://localhost:8080/atjmj/students/atjmj').then(res => {
                console.log(res.data);
                context.commit('ADD_PERSON', {id: nanoid(), name: res.data[0].name});
            }).catch(err => {
                console.log(err);
            })
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了', state, value);
            state.personList.unshift(value);
        }
    },
    state: {

        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name;
        }
    }
}
//求和相关配置
export default {
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            console.log('actions中的jiaOdd被调用了', context, value);
            if (context.state.sum % 2) {
                context.commit('JIA', value);
            }
        },
        jiaWait(context, value) {
            console.log('actions中的jiaWait被调用了', context, value);
            setTimeout(() => {
                context.commit('JIA', value);
            }, 1000);
        }
    },
    mutations: {

        JIA(state, value) {
            console.log('mutations中的jia被调用了', state, value);
            state.sum += value;
        },
        JIAN(state, value) {
            console.log('mutations中的jian被调用了', state, value);
            state.sum -= value;
        }
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10;
        }
    }
}
<template>
  <div class="appContainer">
  
  <CountComponent/>
  <PersonComponent/>

  </div>
</template>

<script>
import CountComponent from './components/CountComponent.vue';
import PersonComponent from './components/PersonComponent.vue';

export default {
  name: "App",

  components: {
    CountComponent,PersonComponent
  },
  methods: {},
};
</script>

<style scoped>
.appContainer {
  padding: 5px;
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  justify-content: center;
   align-items: center;  
}

</style>

荭色海湾
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex 使用文档小结篇
10-18
使用 Vuex 时，我们通常会拥有以下几个核心概念： - 状态（state）：驱动应用的数据源，即状态是应用中所有数据的集合。 - 视图（view）：以声明的方式将 state 映射到视图，每一个 Vue 组件可以读取 store 中的...
vuex 使用步骤代码
09-08
以下是对 Vuex 的使用步骤和相关知识点的详细说明： 1. **安装**： 在项目中使用 Vuex，首先需要通过 npm 或 yarn 安装它： ```bash npm install vuex # 或 yarn add vuex ``` 2. **创建 store**： 在项目...
VueX使用
m0_60505147的博客
10-31 4763
state: {},// 定义mutations}})
Vuex使用
热门推荐
m0_67476502的博客
05-13 1万+
1，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作 2，Vuex分成五个部分： 1.State：单一状态树 2.Getters：状态获取 3.Mutations：触发同步事件 4.Actions：提交mutation，可以包含异步操作 5.Module：将vuex进行分模块 3. vuex使用步骤 3.1 安装 npm insta...
Vuex使用mapState
王正魁
11-23 420
Vuex使用mapState。
Vuex使用及原理
weixin_43190804的博客
02-24 961
一.Vuex是什么 Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。 使用 Vuex 统一管理状态的好处： ① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护 ② 能够高效地实现组件之间的数据共享，提高开发效率 ③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步 什么样的数据适合存储到 Vuex 中： 一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。 ..
vuex使用详细说明及实例
to_the_Future的博客
02-07 1923
Vuex 组件之间传值 目标：熟悉组件之间传值的各种情况（关注非父子之间传值） 父组件向子组件传值 props 子组件向父组件传值 $emit 非父子组件之间传值 : 爷孙；兄弟 发布订阅模式 基于Vue实现发布订阅模式 // 相当于中介 const eventBus = new Vue() // 订阅事件 eventBus.$on('event-b', (param) => { this.counta = this.counta + '----' + param }) //
浅谈super-vuex使用体验
08-27
Super-Vuex 使用体验详解 Super-Vuex 是一种用于简化 Vuex 的数据架构解决方案。Vuex 是一个常用的状态管理工具，但是在实际应用中存在一些问题，如数据共享、业务接口分离、数据模块化管理等。Super-Vuex 正是为了...
Vuex使用详细资料包
11-11
本详细资料包围绕"Vuex使用"展开，旨在帮助开发者深入理解和熟练运用Vuex来优化Vue项目的开发。 在Vuex中，一个应用的所有状态被存储在一个单一的store对象中。这个store包含了应用中的所有状态，以及进行状态变更...
vuex使用举例，简单入门
10-31
通过以上讲解，你应该对 Vuex 的基本使用有了清晰的理解，包括如何创建一个简单的 Vuex 实例以及如何进行模块化管理。接下来，你可以通过阅读 `vuex_demo2` 和 `vuex_demo3` 文件来进一步深入学习，它们可能包含更多...
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 350
【代码】Vue项目-Table添加Form表单校验。
el-checkbox 状态不更新
bao
08-13 292
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 382
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
vue 实现上浮气泡效果
m0_68964998的博客
08-13 268
1.用 li 来做每个气泡。
Vue 3的Computed属性
计算机图形学
08-15 406
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
Vue 3 watchEffect教程
weixin_42545951的博客
08-17 411
Vue 3 引入了 Composition API，其中是一个非常强大的工具，用于响应式地追踪依赖项的变化。本文将详细介绍的使用方法和相关概念。是 Vue 3 的 Composition API 中的一个函数，用于自动追踪其回调函数中使用的响应式状态，并在状态变化时重新执行回调函数。通过本文的介绍，你应该对 Vue 3 中的有了基本的了解。是 Vue 3 响应式系统的核心功能之一，能够极大地简化副作用的处理逻辑，提高代码的可读性和可维护性。在实际开发中，合理使用将使你的 Vue 应用更加强大和灵活。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1123
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
Vue UI - 可视化的Vue项目管理器
最新发布
独泪了无痕
08-17 552
这一步在选择项目所需的配置项时，就很直观了。页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，方便简单多了。我这里只简单选择了Choose Vue version、Babel、Router等三项。选择Vue语法版本（2.x / 3.x（Preview））；选择路由模式（history mode / hash mode）；
使用el-menu跳转时偶尔会出现路由已经变了，但是页面却显示空白的情况
qq_49080239的博客
08-15 264
我改的期间发现，是上一个跳转的组件如果出现template里包了多个标签，那么下一个组件就会变成空白。所以当你发现有一个页面跳转出错，但是怎么也找不到错误时，那你就去看看它的上一个跳转的页面是不是存在错误。刚开始我以为是我数据加载的问题，后来又看有人说是template里不能包多个div，但我去看我出错的组件，并没有出现两个div。后来我就把每个都给改了，即使是elemen-ui的标签也全部改在一个div里，就发现没问题了。
vuex使用commit
09-05
Vuex使用commit来触发一个mutation的执行。Mutation是用来修改Vuex中的状态的唯一途径。使用commit方法可以向store提交一个mutation，并且传递一个可选的payload参数，该参数可以是一个对象或者其他类型的数据，用于传递额外的数据给mutation函数。 具体的使用方法如下： 1. 在Vue组件中使用this.$store.commit来提交一个mutation。 ```javascript this.$store.commit('mutationName', payload); ``` 其中，`mutationName`是你在store中定义的mutation的名称，`payload`是可选的传递给mutation函数的数据。 2. 在Vuex的store中定义mutation函数。 ```javascript mutations: { mutationName(state, payload) { // 修改state中的状态 } } ``` 在mutation函数中，可以通过第一个参数state来访问和修改Vuex中的状态。payload参数是可选的，用于接收组件中通过commit方法传递过来的数据。 注意：mutation是同步执行的，这意味着它们应该用于执行那些不涉及异步操作的状态变更。如果需要执行异步操作，应该使用actions来提交mutation。 希望以上信息对你有所帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值