VueX如何实现数据共享

人夋

1 VueX


1.1 VueX概述

回顾组件之间共享数据的方式：

VueX是实现组件数据（状态）管理的一种机制，可以方便的实现组件之间数据共享。
使用VueX的好处：

• 集中管理共享数据，易于开发和后期维护
  
• 高效实现组件的数据共享，提高开发效率
  
• 存在VueX中的数据都是响应式的，能够实时保持数据与页面的同步
  

1.2 VueX的基本使用

• 安装vuex依赖包
  

1. npm i vuex --save

复制代码

• 导入vuex包
  

1. import Vuex from 'vuex'
   
2. Vue.use(Vuex)

复制代码

• 创建store对象
  

1. const store = new Vuex.Store({
   
2.   //state中存放的就是全局共享数据
   
3.   state:{count:0}
   
4. })

复制代码

• 将store对象挂载到vue中
  

1. new Vue ({
   
2.   el:'#app',
   
3.   render: h=>h(app),
   
4.   router,
   
5.   //将创建的共享数据对象，挂载到vue实例中，所有组件就可以直接从store中获取全局的数据了
   
6.   store
   
7. })

复制代码

1.3 VueX的核心概念

• 1.3.1 State
  

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中
组件访问的state中数据的第一种方式：

1. this.$store.state.全局数据名称

复制代码

组件访问的state中数据的第二种方式：

1. //从vuex中导入mapState函数
   
2. import {mapState} from 'vuex'

复制代码

注释：通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

1. //例如：
   
2. computed:{
   
3.    ...mapState(['count'])
   
4. }

复制代码

• 1.3.2 Mutation
  

Mutation用于变更Store的数据

触发 mutation的第一种方式：this.$store.commit()函数
实例代码：

1. mutations: {
   
2.    add(state){
   
3.      //变更状态
   
4.      state.count++
   
5.    }
   
6. },

复制代码

1. <template>
   
2. <div>
   
3.      <h3>当前最新的count值：{{this.$store.state.count}}</h3>
   
4.      <button @click="handle1">+1</button>
   
5. </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. export default {
   
10.    data(){
    
11.        return{};
    
12.    },
    
13.    methods:{
    
14.        //触发mutation
    
15.       handle1(){
    
16.            this.$store.commit('add')
    
17.       }
    
18.    }
    
19. }
    
20. </script>

复制代码

mutation时传递参数：

1. mutations: {
   
2.    addN(state,step){
   
3.      //变更状态
   
4.      state.count += step
   
5.    }
   
6. },

复制代码

1. handle2(){
   
2. this.$store.commit('addN',2)
   
3. }

复制代码

触发mutation的第二种方式：

1. mutations: {
   
2.    sub(state){
   
3.       state.count--
   
4.    },
   
5.    subN(state,step){
   
6.      state.count -= step
   
7.   },
   
8. },

复制代码

1. <template>
   
2. <div>
   
3.      <h3>当前最新的count值：{{count}}</h3>
   
4.      <button @click="handlersub">-1</button>
   
5.      <button @click="handlesub2">-2</button>
   
6. </div>
   
7. </template>
   
8. <script>
   
9. import { mapState ,mapMutations} from 'vuex';
   
10. export default {
    
11.    computed:{
    
12.        ...mapState(['count'])
    
13.    },
    
14.    methods:{
    
15.        ...mapMutations(['sub','subN']),
    
16.        handlersub(){
    
17.            this.sub()
    
18.        },
    
19.        handlesub2(){
    
20.            this.subN(2)
    
21.        }
    
22.    }
    
23. }
    
24. </script>

复制代码

• 1.3.3 Action
  

Action用于处理异步任务
在actions中不能直接修改state中的数据，必须通过context.commit触发某个mutations中的函数
触发actions的第一种方式：

1. this.$store.dispatch()

复制代码

actions中携带参数：

1. //context是默认参数
   
2. addNdely(context,step){
   
3.   setTimeout(()=>{
   
4.     context.commit('addN',step)
   
5.   },1000)
   
6. }

复制代码

触发actions的第二种方式：

1. import {mapActions} from 'vuex';
   
2. export default {
   
3.     methods:{
   
4.         //触发actions
   
5.          ...mapActions(['addNdely']),   
   
6.     }
   
7. }

复制代码

• 1.3.4 Getter
  

Getter用于对store中的数据进行加工处理形成新的数据

使用getters的第一种方式：

1. this.$store.getters.函数名称

复制代码

使用getters的第二种方式：

1. import {mapGetters} from 'vuex';
   
2. export default {
   
3.    computed:{
   
4.      ...mapGetters(['showNum'])
   
5.    },
   
6. }

复制代码

store.js：

1. import { setTimeout } from 'core-js'import Vue from 'vue'import Vuex from 'vuex'
   
2. Vue.use(Vuex)export default new Vuex.Store({  state: {    count:0  },  getters: {    //这是一个函数    showNum:state =>{       return '最新count:'+state.count    }  },  mutations: {    add(state){      //变更状态      state.count++    },    addN(state,step){      //变更状态      state.count += step    },    sub(state){       state.count--    },    subN(state,step){      state.count -= step   },  },  actions: {    //context是默认参数    addNdely(context,step){         setTimeout(()=>{            context.commit('addN',step)         },1000)    }  },  modules: {  }})

复制代码

Addi.vue：

1. <template>
   
2.   <div>
   
3.       <h3>当前最新的count值：{{this.$store.state.count}}</h3>
   
4.       <!-- <h4>getters:{{$store.getters.showNum}}</h4> -->
   
5.       <h4>getters:{{showNum}}</h4>
   
6.       <button @click="handle1">+1</button>
   
7.       <button @click="handle3">+2</button>
   
8.       <button @click="addNdely">+dely</button>
   
9.   </div>
   
10. </template>
    
11. <script>
    
12. import { mapMutations,mapActions,mapGetters} from 'vuex';
    
13. export default {
    
14.     computed:{
    
15.       ...mapGetters(['showNum'])
    
16.     },
    
17.     methods:{
    
18.         //触发mutation
    
19.          ...mapMutations(['add','addN']),
    
20.          ...mapActions(['addNdely']),
    
21.        handle1(){
    
22.             this.add()
    
23.        },
    
24.        handle2(){
    
25.             this.$store.commit('addN',2)
    
26.        },
    
27.        handle3(){
    
28.            this.$store.dispatch('addNdely',2)
    
29.        }
    
30.       
    
31.     }
    
32. }
    
33. </script>

复制代码

Sub.vue：

1. <template>
   
2.   <div>
   
3.       <h3>当前最新的count值：{{count}}</h3>
   
4.       <button @click="handlersub">-1</button>
   
5.       <button @click="handlesub2">-2</button>
   
6.   </div>
   
7. </template>
   
8. <script>
   
9. import { mapState ,mapMutations} from 'vuex';
   
10. export default {
    
11.     computed:{
    
12.         ...mapState(['count'])
    
13.     },
    
14.     methods:{
    
15.         ...mapMutations(['sub','subN']),
    
16.         handlersub(){
    
17.             this.sub()
    
18.         },
    
19.         handlesub2(){
    
20.             this.subN(2)
    
21.         }
    
22.     }
    
23. }
    
24. </script>

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326764rpu.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！