zoukankan      html  css  js  c++  java
  • vuex相关的知识

      vue的核心是store,它可以看作是一个容器,它包含着应用中的状态state(state,mutations,actions,getters,  modules).它中的存储是响应式的,当store中的状态发生改变时,相应的组件也会发生变化.仓库中的状态值是不能直接改变的,
    唯一的改变就是通过显示的提交(commit
    mutations).状态主要是通过调用mutations中方法来进行改变的.
      
      state 可以看做是状态的定义,或者说是属性.{
    获取state中的属性:$store.state.dialog.count}其中dialog是提出去的状态模块.

    mutations 如果我们操作的对象,需要好多状态,这时候mutations应运而生, {调用mutations中的方法:$store.commit('switch_dialog')}来触发 mutations 中的 switch_dialog 方法,该里面的方法主要是用来改变
            state中的状态值,其中第二个数,可以作为参数传递

      actions 如果需要执行多个mutations,就需要使用actions,$store.dispatch('switch_dialog')来触发actions中的 switch_dialog 方法,也可以传递参数
      getters 是用来计算state 然后生成新的数据 ( 状态 ) 的。 如果很多很多个组件中都需要用到这个与 show 刚好相反的状态 , 
          那么我们需要写很多很多个 not_show , 使用 getters 就可以解决这种问题 :$store.getters.not_show,getters方法中也可以接受其他getters参数作为第二参数,
          也可以通过传递参数给getters中.$store.getters['dialog/getParamer'](1)


    一些辅助函数:

    import { mapState,mapGetters,mapMutations,mapActions} from 'vuex' //辅助函数
    computed:{
    ...mapState({count:state =>state.other.count}) 若使用模块化,使用这个来获取状态
    ...mapState({aaaaa:'count'}) 若vuex中没有使用模块化,可用这个来获取状态
    }

    ...mapGetters({
    getTest:'getTest',
    }

    methods: {
        ...mapMutations([
          'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    
          // `mapMutations` 也支持载荷:
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
        ]),
        ...mapMutations({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
      }

    我自己对这几个的理解区别是:
      state 是属性.它的值获取可以根据状态的模块来进行取值,即使两个状态名称相同,也可以取到不同的值
      
    mutations 是改变属性,调用的过程,是调用所有状态模块中mutations 中的该方法,所以两个状态都会按照各自的方式进行改变
    actions 是调用mutations中的方法,如果它调用的是所有状态模块中的方法,所以mutations中所有的该方法有几个,就会执行几次
      getter 主要是获取计算状态的值,相当于计算属性.该方法所有的状态模块应当只能是唯一的名称,如果另外的状态模块也有这个方法,控制台会报错,但是不会影响运行,数值将会取在最前模块的值
     
    为了解决上面相互依赖的问题,我们可以使用namespaced = true 属性来绑定路径
     

    配置之后使用:
    $store.state.dialog.show用来获得状态
    使用 $store.commit('switch_dialog') 来触发 mutations 中的 switch_dialog 方法
    mutations 中的方法是不分组件的 ,mutations里的操作必须是同步的。只是官方推荐 , 不要在 mutationss 里执行异步操作而已。

    多个 state 的操作 , 使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了。官方推荐 , 将异步操作放在 action 中。
    $store.dispatch('switch_dialog') 来触发 actions 里的 switch_dialog 方法
    ***********最好方法名是独一无二的,因为他会执行所有的当前的方法*********

    $store.getters.not_show 来获得状态 not_show 。
    那么 , 如果很多很多个组件中都需要用到这个与 show 刚好相反的状态 , 那么我们需要写很多很多个 not_show , 使用 getters 就可以解决这种问题 :
    注意 : $store.getters.not_show 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。

    为了方便起见:使用mapState、mapGetters、mapActions 就不会这么复杂了
    mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中。

    例:
     <template>
          <el-dialog :visible.sync="show"></el-dialog>
        </template>
    
        <script>
          import {mapState} from 'vuex';
          export default {
            computed:{
    
              //这里的三点叫做 : 扩展运算符
              ...mapState({
                show:state=>state.dialog.show
              }),
            }
          }
        </script>

     

  • 相关阅读:
    最详细win7下手动搭建PHP环境:apache2.4.23+php7.0.11
    读书笔记:《HTML5开发手册》Web表单
    jQuery点击图片弹出大图遮罩层
    数据库之一
    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
    PHP实现RTX发送消息提醒
    angularJS(3)
    angularJS(2)
    替换
    事务格式
  • 原文地址:https://www.cnblogs.com/chengyangyang/p/9460849.html
Copyright © 2011-2022 走看看