首先,我們需要聲明一個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
當然。我只是把這個當成一個全局變量在使用,沒有使用很多同步異步的功能,還有什么狀態管理都沒有管,先用上了再說吧,其他大佬肯定不會像我這么暴力的使用。。。