首页 > 其他分享 >vuex的使用

vuex的使用

时间：2023-07-05 23:12:26浏览次数：34  
标签：... sum value state actions 使用 vuex store

下载安装npm i vuex

搭建vuex环境

1.创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.在main.js中创建vm时传入store配置项

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

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store
})

基本使用

1.初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
    jia(context,value){
        // console.log('actions中的jia被调用了',miniStore,value)
        context.commit('JIA',value)
    },
}

const mutations = {
    //执行加
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value)
        state.sum += value
    }
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

 

2.组件中读取vuex中的数据：$store.state.sum

 

 

3.组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

 

 

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

 

 

具体案例：

index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
        console.log('actions中的jia被调用了')
        context.commit('JIA',value)
    },
    jian(context,value){
        console.log('actions中的jian被调用了')
        context.commit('JIAN',value)
    }, */
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了')
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了')
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state,value){
        console.log('mutations中的JIA被调用了')
        state.sum += value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了')
        state.sum -= value
    }
}
//准备state——用于存储数据
const state = {
    sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

Count.vue

<template>
    <div>
        <h1>当前求和为：{{$store.state.sum}}</h1>
        <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:'Count',
        data() {
            return {
                n:1, //用户选择的数字
            }
        },
        methods: {
            increment(){
                // commit 是操作 mutations
                this.$store.commit('JIA',this.n)
            },
            decrement(){
                // commit 是操作 mutations
                this.$store.commit('JIAN',this.n)
            },
            incrementOdd(){
                // dispatch 是操作 actions
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
                // dispatch 是操作 actions
                this.$store.dispatch('jiaWait',this.n)
            },
        },
        mounted() {
            console.log('Count',this)
        },
    }
</script>

<style lang="css">
    button{
        margin-left: 5px;
    }
</style>

getters的使用

 

1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

 

 

2.在store.js中追加getters配置

 

......

const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.Store({
    ......
    getters
})

 

3.组件中读取数据：$store.getters.bigSum

 

四个map方法的使用

import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

1.mapState方法：用于帮助我们映射state中的数据为计算属性

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

3.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

4.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则传的参数是事件对象(event)。

  


具体案例：



<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>年龄：{{ age }}</h3>
    <h3>姓名：{{name}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <!-- 用了mapActions 和 mapMutations 的话要主动传参 -->
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  name: "Count",
  data() {
    return {
      n: 1, //用户选择的数字
    };
  },
  computed: {
    ...mapState(['sum', 'age', 'name']),
    ...mapGetters(['bigSum'])  
  },
  methods: {
    ...mapActions({incrementOdd: 'sumOdd', incrementWait: 'sumWait'}),
    ...mapMutations({increment: 'sum', decrement: 'reduce'})
  },
  mounted() {
    console.log("Count", this);
  },
};
</script>

<style lang="css">
button {
  margin-left: 5px;
}
</style>



模块化+命名空间


目的：让代码更好维护，让多种数据分类更加明确。


3.修改store.js





const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})



3.开启命名空间后，组件中读取state数据：



//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
// 用 mapState 取 countAbout 中的state 必须加上 'countAbout'
...mapState('countAbout',['sum','school','subject']),



4.开启命名空间后，组件中读取getters数据：



//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])



5.开启命名空间后，组件中调用dispatch



//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})



6.开启命名空间后，组件中调用commit



//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),



具体案例：
count.js



//求和相关的配置
export default {
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            console.log('actions中的jiaOdd被调用了')
            if(context.state.sum % 2){
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            console.log('actions中的jiaWait被调用了')
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)
        }
    },
    mutations:{
        JIA(state,value){
            console.log('mutations中的JIA被调用了')
            state.sum += value
        },
        JIAN(state,value){
            console.log('mutations中的JIAN被调用了')
            state.sum -= value
        },
    },
    state:{
        sum:0, //当前的和
        school:'尚硅谷',
        subject:'前端',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    },
}



 


person.js



//人员管理相关的配置
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)
            }else{
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}



 


index.js



//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})



count.vue



<template>
    <div>
        <h1>当前求和为：{{sum}}</h1>
        <h3>当前求和放大10倍为：{{bigSum}}</h3>
        <h3>我在{{school}}，学习{{subject}}</h3>
        <h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        name:'Count',
        data() {
            return {
                n:1, //用户选择的数字
            }
        },
        computed:{
            //借助mapState生成计算属性，从state中读取数据。（数组写法）
            ...mapState('countAbout',['sum','school','subject']),
            ...mapState('personAbout',['personList']),
            //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
            ...mapGetters('countAbout',['bigSum'])
        },
        methods: {
            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
            ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
            ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
        },
        mounted() {
            console.log(this.$store)
        },
    }
</script>

<style lang="css">
    button{
        margin-left: 5px;
    }
</style>



 


person.vue



<template>
    <div>
        <h1>人员列表</h1>
        <h3 style="color:red">Count组件求和为：{{sum}}</h3>
        <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="add">添加</button>
        <button @click="addWang">添加一个姓王的人</button>
        <button @click="addPersonServer">添加一个人，名字随机</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:'Person',
        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}
                this.$store.commit('personAbout/ADD_PERSON',personObj)
                this.name = ''
            },
            addWang(){
                const personObj = {id:nanoid(),name:this.name}
                this.$store.dispatch('personAbout/addPersonWang',personObj)
                this.name = ''
            },
            addPersonServer(){
                this.$store.dispatch('personAbout/addPersonServer')
            }
        },
    }
</script>



 




 


 


 



标签：...,sum,value,state,actions,使用,vuex,store	

From： https://www.cnblogs.com/ixtao/p/17530575.html
      

      




      

      

        
相关文章

        

          
    
 
  • 使用parcel搭建three.js开发环境
    目录1、安装2、项目设置3、打包脚本为了方便模块化进行three.js项目的学习和开发，又不用学习太多的配置，增加学习成本，所以就使用Parcel这个web应用打包工具。Parcel官网：https://v2.parceljs.cn/getting-started/webapp/1、安装​在开始之前，您需要安装Node和npm，并为您......
     
  • 使用了下chatgpt3.0和chatgpt4.0的区别
    chatgpt4.0的理解能力更强了以下地址即可试用  ......
     
  • Vite的基本使用
    浏览器支持默认的构建目标是能支持 原生ESM语法的script标签、原生ESM动态导入 和 import.meta 的浏览器。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持——查看 构建生产版本 章节获取更多细节。所以说，默认情况下，vite构建的项目支持的浏览器具体要......
     
  • 【嵌入式】keil5中使用C，C++混合编译
    5份文件:a.c和a.h和b.cpp和b.h和main.c其中main.c调用b.cpp，b.cpp调用a.c main.c#include"./b.h"intmain(void){	intt=funC();	while(1)	{	}} b.h#ifndef_B_#define_B_#ifdef__cplusplusextern"C"{#endifintfunC(void);#ifdef__cplusp......
     
  • Jmeter学习之七_使用influxdb2.7和grafana10进行Jmeter测试结果展示的方法
    Jmeter学习之七_使用influxdb2.7和grafana10进行Jmeter测试结果展示的方法摘要前几天验证了线程组内的-监听器jp@gc相关的组件以及验证了server-agent的方式可以监控机器的性能表现.但是发现很多结果集是比较杂乱并且不太好查看的.然后查了些资料可以使用influxdb......
     
  • Dynamics CRM 邮箱设置 “允许使用凭据进行电子邮件处理” 被禁用的解决
     使用部署管理员账号登录操作系统OS（一般是域账号），打开powerShell：执行如下命令：add-PSSnapinMicrosoft.Crm.PowerShell$setting=Get-CrmSettingServerSideSyncEmailSettings$setting.AllowCredentialsEntryViaNonSecureChannels=$TrueSet-CrmSetting$settingGet-CrmSet......
     
  • Kubernetes使用Helm部署Gitea仓库
    使用Helm部署Gitea仓库配置Helm源helmrepoaddgiteahttps://dl.gitea.io/chartshelmrepoupdate导出Gitea配置文件values.yamlhelmshowvaluesgitea/gitea>values.yaml#helmshowreadmegitea/gitea>README.md修改values.yamlvimvalues.yaml修改持久化配置......
     
  • 十、添加资源文件和使用样式
    1、添加资源文件（.qrc文件）1.1创建项目并打开项目1.2Ctrl+n创建新文件，选择“QT”文件下边的“QtResourceFile”。 1.3输入文件名和选择保存路径1.4将需要添加的资源文件复制到项目目录下1.5导入资源文件到Qt项目中1.5.1 为资源文件添加前缀（类似于文件夹） 1.5.2......
     
  • Unity  在AssetPostprocessor内使用AssetDataBase是不安全的行为（尤其在Build前进行Lib
    https://docs.unity3d.com/Manual/AssetDatabaseCustomizingWorkflow.html在Build前进行Library的删除，读取Asset是不安全的行为，需要使用C#的IOSystem进行操作AssetImportOrderIfyouarescriptingusingtheAssetDatabaseclass,it’simportanttounderstandhowtheor......
     
  • 使用docker-compose部署apollo配置中心
    docker-compose部署apollo配置中心1、Apollo配置中心1.1、Apollo简介Apollo（阿波罗）是携程框架部门研发的开源配置管理中心，能够集中化管理应用不同环境、不同集群的配置，配置修改后能够实时推送到应用端，并且具备规范的权限、流程治理等特性。Apollo支持4个维度管理Key-Value格式......
     
    •            
          

        

      

    

    

      
赞助商

      




      

      
阅读排行

      

        
      

    

  





  
 
    
网站主页关于我们联系我们网站地图 

    
本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。 

    
Copyright © 2020-2023  IPS99  版权所有 IPS99