zoukankan      html  css  js  c++  java
  • vuex简单使用

    stare

    state提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储

    // 创建store数据源,提供唯一公共数据(vuex中写) 
    const store = new Vuex.Store({ 
        state: { count: 0 }            
        //  state中的count(数据)就是共享的数据
    })

    组件访问 State 中数据的第一种方式:

      this.$store.state.全局数据名称 (组件,html中写)

      (在template中this可以省略,也就是在html中this可以省略)

    <div>公共数据count:{{$store.state.count}}</div>

    组件访问 State 中数据的第二种方式(组件,html中写):

      // 1. 从 vuex 中按需导入 mapState 函数

    import { mapState } from 'vuex'

      // 2. 通过刚才导入的 mapState 函数,将当前组件需要的全局数据(vuex中的数据),映射为当前组件的 computed 计算属性:

    computed:{...mapState(['count'])}

      // 3.可以在HTML中直接用count来使用state中的count数据

    <div>公共数据count:{{count}}</div>

    Mutation

    Mutation 用于变更 Store中 的数据。

    ① 只能  通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。

    ② 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

    ③ 不允许在组件中通过$store.state直接修改  state  中的数据(因为后期无法快速找到 是谁 修改的数据,但使用mutation可以在vuex中快速找到,方便后期的维护)

       // 定义 Mutation(vuex中写) 

    const store = new Vuex.Store({ 
        state: { count: 0 }, 
        mutations: {  
           add(state) {        // state就是上面的state函数(第一个形参永远都是自身的state,state代表当前全局的数据对象)             // 变更状态
              state.count++ 
           } 
        }
    }) 

      // 触发mutation的第一种方式(组件,html中写)

    methods: {
         handle1( ) {     
            // 触发 mutations 的第一种方式                         commit的作用就是调用 某个 mutation 的函数
             this.$store.commit('add')
         } 
    } 

    触发mutation并传递参数

      // 定义Mutation(vuex中写)

     const store = new Vuex.Store({
         state: {         count: 0      }, 
         mutations: { 
              addN(state, step) {
                // 第一个形参永远是state,第二个 参数是外界传递过来的值                // 变更状态
                    state.count += step
               }
           } 
    })

      // 触发mutation (组件,html中写)

     methods: {        
            handle2( ) {
                   // 在调用 commit 函数, 触发 mutations 时携带参数
                   this.$store.commit('addN', 3) 
              // 通过commit调用mutations,同时携带参数 3 ,第二个参数对应着mutation中的第二个参数
            }
     } 

    this.$store.commit( ) 是触发 mutations 的第一种方式,触发 mutations 的第二种方式:(组件,html中写)

      // 1. 从 vuex 中按需导入 mapMutations 函数

    import { mapMutations } from 'vuex'

       // 2. 通过刚才导入的 mapMutations 函数,将需要的 mutations 函数,映射为当前组件的 methods 方法:

    methods: {     ...mapMutations(['add','addN'])}

      // 3.就可以直接用 this.add( )来调用 mutation中的 add 函数

      // 4.传参就变成了this.add(3)  3就是mutation的第二个参数

    Actions

    如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发

    Mutation 的方式间接变更数据

     // 定义 Action
     const store = new Vuex.Store({
         // ...省略其他代码(state)
         mutations: {
             add(state) {
                 state.count++
             }
         },
         actions: {            actions不能直接修改state中的数据,必须通过context.commit去触发mutation中的函数改变state中的数据
             addAsync(context) {        
                 setTimeout(() => {              接收形参context,用形参context,触发mutation
                     context.commit('add')        通过commit触发mutation中的函数
                 }, 1000)
             }
         }
     }) 

    // 触发 Action

    // 触发 Action
     methods: {
         handle() {
             // 触发 actions 的第一种方式
             this.$store.dispatch('addAsync')    通过dispatch触发actions中的函数
         }
     } 


    触发 actions 异步任务时携带参数:

    // 定义 Action
     const store = new Vuex.Store({
         // ...省略其他代码
         mutations: {
             addN(state, step) {
                    state.count += step
               }
          },
          actions: {
               addNAsync(context, step) {        // 第一个形参永远都是context,第二个参数是从外界传过来的参数,用step接收
                    setTimeout(() => {
                         context.commit('addN', step)    // 将接受的参数,传递到  addN中,然后addN在mutation中执行
                    }, 1000)
               }
          }
     }) 
    
    // 触发 Action
     methods: {
         handle() {
             // 在调用 dispatch 函数,
             // 触发 actions 时携带参数
             this.$store.dispatch('addNAsync', 5)        // 第二个参数是传给vuex的参数
         }
     } 

    this.$store.dispatch() 是触发 actions 的第一种方式,触发 actions 的第二种方式:

    // 1. 从 vuex 中按需导入 mapActions 函数

    import { mapActions } from 'vuex'

    通过刚才导入的 mapActions 函数,将需要的 actions 函数,映射为当前组件的 methods 方法:
    // 2. 将指定的 actions 函数,映射为当前组件的 methods 函数

    methods: {
     ...mapActions(['addASync', 'addNASync'])
    }

    3.就可以直接用 this.addAsync( )来调用 action中的 addNAsync函数,或者直接使用 @click="addAsync"
    4.传参就变成了this.addNAsync(3) 3就是action的第二个参数,或者直接使用 @click="addNAsync(3)"

    Getter 

    ① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。
    ② Store 中数据发生变化,Getter 的数据也会跟着变化。

    // 定义 Getter
     const store = new Vuex.Store({
         state: {
             count: 0
         },
         getters: {
             showNum: state => {        // showNum函数接受的第一个参数是state
                 return '当前最新的数量是【'+ state.count +'】'    // 调用showNum就会返回  这个字符串
             }
         }
     })

    使用 getters 的第一种方式:

    this.$store.getters.名称(在HTML中可以省略)

    使用 getters 的第二种方式:

    import { mapGetters } from 'vuex'
    通过刚才导入的 mapGetters 函数,将当getters ,映射为当前组件的 computed 计算属性:
    computed: {
         ...mapGetters(['showNum'])
    }

    可以再html直接用  插值表达式{{showNum}}   来使用 

    Module

    // 定义 Getter
     const store = new Vuex.Store({
         state: {
             count: 0
         },
         modules: {
             moduleA: {
                  state: {
    name: '小明'
    }
    , mutations: { loginMutation(){} }, actions: { ... }, getters: { ... } } } })

    触发

    state触发
    this.store.state.moduleA.name
    mutations触发 
    this.$store.commit("moduleA/loginMutation") // moduleA下的loginMutation方法
    第二种触发
    methods: {
      ...mapMutations(‘moduleA’,['add','addN']),   // 模块内的
      ...mapMutations(['add','addN'])        // 公共的
    }

    结束,请多多练习。

    有问题可直接留言,望各位与我都可以成为技术大牛。
  • 相关阅读:
    将Nginx添加到windows服务中
    springboot使用redis管理session
    GIT常用命令
    阻止360、谷歌浏览器表单自动填充
    谈谈对Spring IOC的理解
    同一个Nginx服务器同一端口配置多个代理服务
    LeetCode 653. Two Sum IV
    109. Convert Sorted List to Binary Search Tree(根据有序链表构造平衡的二叉查找树)
    108. Convert Sorted Array to Binary Search Tree(从有序数组中构造平衡的BST)
    LeetCode 236. Lowest Common Ancestor of a Binary Tree(二叉树求两点LCA)
  • 原文地址:https://www.cnblogs.com/xhxdd/p/12848385.html
Copyright © 2011-2022 走看看