uni-app—小程序使用vuex（modules/state/actions/mutations）（圖文）

1、Src文件夾下面新建store文件夾，新建index.js文件。若使用modules 再創建一個modules文件夾，在modules文件夾中創建想要的js文件，我給首頁和關於我們頁面分別創建了一個

2、index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import home from './modules/home.js’ // 引入modules文件夾中的js文件
import about from './modules/about.js'

Vue.use(Vuex)

export default new Vuex.Store({ // export
    modules: {
        home,
        about
    }
})

3、modules文件夾下的home.js文件， about頁面先沒有寫

const homeModules = {
    state: {
        num: 0
    },
    mutations: {
        handleSetNum1(state, data) { // 使用mutations直接更改state的值
           state.num = data
        },
        setNum2(state, data) {
            state.num = data
        }
    },
    actions: { // 使用actions，通過mutations更改state的值
        handleSetNum2({ commit }, data) {
            commit('setNum2', data)
        }
    }
}
export default homeModules

4、使用頁面

<button @click="setNum1">按鈕1</button>
<button @click="setNum2">按鈕2</button>

import { mapState, mapActions, mapMutations } from ‘vuex'
computed: {
    ...mapState({
        num: state => state.home.num        
    })
},
methods: {
    ...mapActions(['handleSetNum2']), // 引入store/modules/home.js的方法
    ...mapMutations(['handleSetNum1']), // 引入store/modules/home.js的方法
    setNum1() {
        this.handleSetNum1('1’) // 調用，傳值
    },
    setNum2() {
        this.handleSetNum2('2’) // 調用，傳值
    }
}

首先頁面加載時在computed中引入的home.js中的num顯示
點擊按鈕1 調用home.js中的mutations的handleSetNum1方法改變值
點擊按鈕2 調用home.js中的actions的handleSetNum2方法改變值