脚本宝典收集整理的这篇文章主要介绍了

Vuex 学习笔记

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

VUEX是什么?

用来解决组件之间共用数据问题的一个插件
  • Vuex 内部结构

    • State 就是被共用的数据(但是不可以被直接操作,不可以直接访问)
    • Mutations 可以直接操作(Mutate) State 中的数据,可以定义 State 中的数据如何被改变
    • Actions 可以触发 Mutations 对States的改变,该触发操作专业名词为commit
  • Components 与Vuex的交互

    • 通过 dispatch Actions 的方式来改变 State
    • 通过Render来读取State中的数据

Vuex的使用方法

  1. 新建一个store.js文件(位置可以自选)
  2. 在该文件中引入vue和vuex,并在vue中启用vuex

    Improve vue from 'vue'
    Improve vuex from 'vuex'
    vue.use(vuex)
  3. 在该文件中配置 state,mutations,actions

    //这里的state是数据实际储存的地方
    const state={
        count:10
    }
    const mutations={
        add(state,param){
            state.count += param
        },
        reduce(state,param){
            state.count -= param
        }
    }
    const actions={
        add:({commit},param)=>{
            commit('add',param)
        },
        reduce:({commit},param)=>{
            commit("reduces",param)
        }
    }
  • 只有一个store配置的方法

    1. 将以上配置在Vuex对象中实例化并导出

      export default new vuex.Store({
          state,
          mutations,
          actions
      })
    2. 在main.js中引用该vuex的store实例

      improt store from './store'
      new vue ({
          ......
          store,
          ......
      })
    3. 在组件中使用vuex的store实例
      在页面中引用该实例state的值 $store.state.count
      引入该实例的actions  

      import {mapActions} from ‘vuex’
      export default {
        methods:mapActions([‘add’,’reduce’])     
      }

      页面使用actions  @click='add(param)' @click='reduce(param)'

  • 有多个store配置的方法

    1. 将以上配置在Vuex对象中实例化并导出

      export default new vuex.Store({
          module:{
             a: {
                  state,
                  mutations,
                  actions
              }
          }
      })
    2. 在main.js中引用该vuex的store实例

      improt store from './store'
      new vue ({
          ......
          store,
          ......
      })
    3. 在组件中使用vuex的store实例
      在页面中引用该实例state的值 $store.state.a.count
      调用该实例的actions  

        import {mapActions} from ‘vuex’
        export default {
            methods:mapActions('a',[‘add’,’reduce’])     
        }

      页面使用actions  @click='add(param)' @click='reduce(param)'


这篇笔记主要是本人学习Vuex时候的知识总结,如果有不对的地方还请多多斧正

总结

以上是脚本宝典为你收集整理的

Vuex 学习笔记

全部内容,希望文章能够帮你解决

Vuex 学习笔记

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过