在mpvue或者Vue中使用VUEX

 

 

 

 

 

 第一個頁面Index，主頁哦

 1 import Vue from'vue'
 2 import Vuex from'vuex'
 3 
 4 import getters from'./getters'
 5 import state from'./state'
 6 import actions from'./actions'
 7 import mutations from'./mutations'
 8 import createLogger from'vuex/dist/logger'
 9 
10 Vue.use(Vuex) 11 
12 constdebug=process.env.NODE_ENV!=='production'
13 
14 export default newVuex.Store({ 15 getters, 16 state, 17 actions, 18 mutations, 19 strict:debug, 20 plugins:debug?[createLogger()]:[] 21 })

 

第二個頁面

state頁面，用來存放數據的

const state={ modelConfig:{ } } export default state

第三個頁面

getters頁面，用來獲取vuex數據的

1 const getters={ 2 modelConfig(state){ 3 returnstate.modelConfig 4 } 5 } 6 
7 export default getters

 

第四個頁面

 mutations頁面，用來同步處理數據的，一些邏輯要寫在這裏

1 import {MODEL_CONFIG} from'./mutation-type'
2 
3 export default{ 4 [MODEL_CONFIG](state,value){ 5 console.log('state',state) 6 state.modelConfig=value 7 } 8 }

 

第五個頁面

mutations-type，用來給mutations中方法定義函數名的，可用，可不用，若是不用的話，mutaitons直接寫函數名就好了

 1 export const MODEL_CONFIG='MODEL_CONFIG' 

 

第六個頁面

acitons頁面，這個是處理異步數據的，其實就是異步的使用mutations裏面的方法，不過我沒用到

1 const actions={ 2 modelAction(context,num){ 3 context.commit('MODEL_CONFIG',num) 4 } 5 } 6 
7 export default actions

 

至此，頁面已經創建完畢了，下面開始使用

引入方式一 vue

 

 

 引入方式二 mpvue ，這裏防止輔助函數mapGetters等報錯，經過原型的方式綁定store

 

 

開始正式使用了，引入以後就須要要用到vuex封裝的語法糖

第一步 | 使用vuex中保存的數據 

1）引用語法糖  import{mapGetters}from"vuex";  

2）在computed中使用mapgetters方法
 1 computed:{ //獲取state裏面的數據 2 ...mapGetters(['modelConfig']) 3 },  
3）是想要的地方直接用this.就能夠使用，好比我在小程序的onload生命週期使用
 1 onLoad(){ 2 console.log('vuex',this.modelConfig) 3 },  

第二步 | 處理vuex中的數據
1）引入語法糖
import{mapMutations}from"vuex";
2）在methods中使用mapmutations
...mapMutations({ 'sendVueX':'MODEL_CONFIG' }), 若是要傳參的話直接在vue界面的click中帶入就行 button.button-t(@click="sendVueX('10')")
發送vuex 主要仍是mutations 和actions兩個頁面吧，須要作數據操做的，操做數據用的

 

 

 

 參考文檔之一：

 

 

http://www.javashuo.com/article/p-ugiwtdbq-gt.html