Uni-app / Vue之vuex使用方式总结

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（响应式）。
Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

优势

1. Vuex的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。
2. 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。
3. 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。

劣势

vuex会把自身挂载到所有组件上,不管当前组件是否用到state里面的属性，所以频繁混乱的使用vuex会增加页面的性能损耗。
如果你的操作数据不涉及到公共操作，只是单一组件操作，一定不要把对应的属性对象放到vuex的state中，可以使用storage或者globalData。

使用场景

1. 当一个组件需要多次派发事件时。例如购物车数量加减。
2. 跨组件共享数据、跨页面共享数据。例如订单状态更新。
3. 需要持久化的数据。例如登录后用户的信息。
4. 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。

核心概念

state、getter、mutation、action、module
（网上资料太多，不做详解了）

使用方式

一、引入
main.js中引入路径

import Vue from 'vue'
import App from './App'
import store form '@/store/vuex.js'
Vue.prototype.$store = store
const app = new Vue({
    store,
    ...App
})

二、编译vuex.js

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from '@/modules/moduleA.js';
import moduleB from '@/modules/moduleB.js';
// 可实现state永久存储
// import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

var store = new Vuex.Store({
    // plugins:[createPersistedState()],
   /***
    * 获取 this.$store.state.userName
    * 设置 this.$store.state.userName = "skz";
    * **根据官方说明，不可直接更改state中数据，需要通过mutations**
    ***/
    state:{
        useravatar:'/static/placeloder_pic_120.png',
        username: '脚上三颗痣', 
        age: 18,
        sex: '保密',
        contact: '12345678901'
    },
    /**
    * 其实就是vue的computed
    * 使用方式: store.getters.currentUserName/currentUseravatar;
    **/
    getters:{
        currentUserName(state){
            return state.username;
        },
        currentUseravatar(state){
            return state.useravatar
        }
    },
    /***
    * 数据突变, store数据改变的唯一方法
    * 使用方式this.$store.commit(方法名, 参数)
    * mutation 必须是同步函数，否则无法确认发生改变时间
    ***/
    mutations:{
        changeUserName(state, username) {
            state.username = userInfo.username;
            state.useravatar = userInfo.useravatar;
        },
        changeUseravatar(state, useravatar) {
            state.useravatar = userInfo.useravatar;
        },
        add(state, ageNum){
             state.age += ageNum
        }
    },
    /***
    * 执行方法，类似mutations，
    * action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态
    * action 可以包含任意异步操作
    * 使用方式this.$store.dispatch('addAge', 1)
    ***/
    actions:{
        addAge(context, num){
            context.commit('add', num);
        },
        
        changeUserName(context){
            setTimeout(function() {
                context.commit('changeUserName', {username: 'skz001'})
            }, 3000);
        },
        
        // 异步promise示例
        /*
        用法
        store.dispatch('actionMethod').then(() => {
            // ...
         })
        */
        actionMethod({commit}){
            return new Promise((resolve, reject)=>{
                setTimeout(function() {
                    commit('someMutation')
                    resolve('success')
                }, 1000);
            })
        }
    },
    /**
    * 数据model
    **/
    modules:{
        moduleA,
        moduleB,
    }
})

// 导出对象
export default store;

三、使用
1.基本使用方式在vuex.js中已做说明，下面讲的是利用辅助函数（其实就是映射）的方式完成数据响应.(纯手敲的代码，请忽略高亮~~~~)

以上就是vuex的基本使用方式。对于把state、getter、mutations、actions拆分成功各自的.js类，看个人习惯了