uni-app Vuex的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能
这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意：

image.png

发送方法|接收方法
方式一：

部门	发送方法	接收方法
getters(数据筛选)	computed通过辅助函数进行混入 ...getters(['名称', '名称'])	this.'名称'或{{名称}}
mutations(同步)	this.$store.commit('方法名', data)	方法名 =>(state, payload.data)
mutations(同步)	this.$store.commit('方法名', data)	方法名 =>(state, data)
actions(异步)	this.$store.dispatch('方法名', data)	方法名 =>(context, data)
actions(异步)	this.$store.dispatch('方法名', 对象)	方法名 =>(context, 对象)

重点

把state、getters、mutations、actions、moudle进行抽取方便维护管理
方式二：辅助函数进行混入
以下是案例展示

image.png

<template>
    <view>
        <text>{{getCounter}}</text>
        
        <template v-for="(item, index) in getList">
            <view>{{item.name}}  {{item.age}}</view>
        </template>
        
        <button @tap="handlerCounter">修改counter</button>
        <button @tap="handlerPersin">修改Person</button>
        
    </view>
</template>

<script>
    
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
    import {ADD_COUNTER, UPDATE_PERSON} from '../../store/moudleA/moudlA-type.js'
    
    export default {
        data(){
            return {
            }
        },
        computed:{
            ...mapState(['counter']),
            ...mapGetters(['getCounter', 'getList'])
        },
        methods: {
            ...mapMutations([ADD_COUNTER]),
            ...mapActions(['upDatePerson']),
            handlerCounter(){
                this.ADD_COUNTER({num: 2})
            },
            handlerPersin(){
                this.upDatePerson('张三').then( res => {
                    uni.showToast({
                        title: '修改成功'
                    })
                })
            }
        }   
    }
</script>

<style>
</style>

index.js文件（ $\color{red}{Vuex主文件}$ ）

import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex)

import moudleA from './moudleA/moudleA.js'

const store = new Vuex.Store({
    modules:{
        moudleA
    }
})

export default store

actions.js文件（ $\color{red}{里面的方法都是异步的}$ ）

import {UPDATE_PERSON} from "./moudlA-type.js"

export default{
        //更具名称修改年龄
    upDatePerson: (content, name) => {
        content.commit(UPDATE_PERSON,{
            name: name,
            age: 80 
        })
    }
}

getters.js （ $\color{red}{对数据的筛选}$ ）

export default{
    getCounter: (state, getter) => { //获取counter
        return state.counter
    },
    getList: (state, getter) =>{ //获取学生数据
        return state.student
    }
}

moutations.js文件（ $\color{red}{里面的方法都是同步的}$ ）

//抽取成常量，是为了不会写错方法名称，避免一些低级错误
import {ADD_COUNTER, UPDATE_PERSON} from "./moudlA-type.js"

export default{
    [ADD_COUNTER]: (state, payload) => { //对counter进行增加
        return state.counter += payload.num
    },
    [UPDATE_PERSON]: (state, payload) =>{ //根据名称修改年龄
        return new Promise((resolve, reject) => {
            let isUpdate = false
            for (var i = 0; i < state.student.length; i++) {
                let item = state.student[i]
                if(item.name === payload.name){
                    item.age += payload.age
                    isUpdate = true
                    break
                }
            }
            if(isUpdate){
                resolve(true)   
            }else{
                reject(false)
            } 
        })
    }
    
}

moudleA-type.js文件( $\color{red}{抽取成常量，是为了不会写错方法名称，避免一些低级错误}$ )

export const ADD_COUNTER = 'ADD_COUNTER'   //counter增加
export const UPDATE_PERSON = 'UPDATE_PERSON'  //根据名称修改年龄

moudleA.js文件

import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'

const state = {
    counter: 1000,
    student: [
        {
          id: 1,
          name: '张三',
          age: 10
        },
        {
          id: 2,
          name: '李四',
          age: 11
        },
        {
          id: 3,
          name: '王五',
          age: 12
        },
    ]
}

export default{
    state,
    getters,
    mutations,
    actions
}

在main.js文件里面进行挂载

import Vue from 'vue'
import App from './App'
import store from './store/index.js'

Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

注：哪里有写的不对的地方，请朋友给与指点