vue中修改store的介紹


 首先,我們需要聲明一個store的index.js文件:

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //這里放全局參數

  },

  mutations: {

    //這里是set方法

  },

 getters: {        //這里是get方法   },

  actions: {

    //這個部分我暫時用不上

  },

  modules: {

//這里是我自己理解的是為了給全局變量分組,所以需要寫提前聲明其他store文件,然后引入這里

  }

})

    這就是一個最簡單的store文件格式了。

    然后根據我們的變量分組,我新建了一個module文件夾

 

 
 

    我在里面新建了一個demo文件:

export default {

    state: {

        //屬性

        demoValue:{}

    },

    getters: {

        getDemoValue: state => state.demoValue

    },

    mutations: {

        //set方法

        setDemoValue(state,demoValue){

            state.demoValue = demoValue

        }

    }

}

    這個文件就不需要太多東西了,創建之后,在index中通過import引入,然后在module中申明就好了

    現在前置准備做好了,怎么使用呢?這個才是重點。

    經過我測試,最開始的時候我也是胡亂在弄,直接在需要調用的地方寫:

this.$store.demo.setDemoValue(value);

this.$store.demo. getDemoValue ;

    當然是給我報錯,提示undefined。於是我斷點去看我的$store里面到底有什么東西。這一看不要緊呀。發現里面根本沒有我的demo屬性對象。。。但是在$store里面直接有個getter,打開看,居然就是我demo里面的getDemoValue 方法執行后的返回值,也就是說getter里面的東西是我申明的getter里面方法的返回值,現在如何取值解決了:

this.$store.getters. getDemoValue

    這樣能直接獲取我的全局變量demoValue的值,那么如何修改,或者說怎么存入呢?我在$store里面也沒有看見mutations這個屬性呀。但是有個commit,是一個方法,這不是提交嗎?試一下。

    這個方法有兩個參數,於是有了以下:

this.$store.commit('setDemoValue', value);    

    別說。這還真是對的。經過這一番測試,發現。在全局變量的存取過程中,根本就跟我聲明的demo.js文件的名字,還有我在index.js中module里面引入的demo的命名沒有半點關系。。

    現在總結一下使用方法:

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //這里放全局參數

    demoValue:{}

  },

  mutations: {

    //這里是set方法

    setDemoValue(state,demoValue){

            state.demoValue = demoValue

        }

  },

    getters: {

    //get方法

        getDemoValue: state => state.demoValue

    },

  actions: {

    //這個部分我暫時用不上

  },

  modules: {

//這里是我自己理解的是為了給全局變量分組,所以需要寫提前聲明其他store文件,然后引入這里

  }

})

    使用的時候get方法和set方法分別是:

this.$store.commit('setDemoValue', value);    

this.$store.getters. getDemoValue

    當然。我只是把這個當成一個全局變量在使用,沒有使用很多同步異步的功能,還有什么狀態管理都沒有管,先用上了再說吧,其他大佬肯定不會像我這么暴力的使用。。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM