vuex是什么？怎么使用？哪种功能场景使用它？

store.js详解：

import Vue from 'vue';
import Vuex from 'vuex';
import moduleUser from './user.js'

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        'm_user': moduleUser
    }
})

export default store

user.js详解：

export default {
    namespaced: true,
    // 数据
    state: () => ({
        userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'),
        accessToken: uni.getStorageSync('accessToken') || ''
    }),
    // 修改数据
    mutations: {
        updateUserInfo(state, userinfo) {
            state.userinfo = userinfo
            uni.setStorageSync('userinfo', JSON.stringify(state.userinfo))
        },
        updateAccessToken(state, accessToken) {
            state.accessToken = accessToken
            this.commit('m_user/saveAccessTokenToStorage')
        },
        saveAccessTokenToStorage(state) {
            uni.setStorageSync('accessToken', state.accessToken)
        }
    },
    // 计算数据
    getters: {
        // 统计购物车中商品的总数量
        total(state) {
            let c = 0
            // 循环统计商品的数量，累加到变量 c 中
            state.cart.forEach(goods => c += goods.goods_count)
            return c
        }
    }
}

tabbar-badge.js动态设置购物车徽标详解：

import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters('m_user', ['total'])
    },
    watch: {
        // 监听 total 值的变化
        total() {
            // 调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
            this.setBadge()
        },
    },
    onShow() {
        this.setBadge()
    },
    methods: {
        setBadge() {
            uni.setTabBarBadge({
                index: 2, // 购物车index
                text: this.total + '' // 注意：text的值必须是字符串，不能是数字
            })
        }
    }
}

其他tabbar页面引入即可

import badgeMix from '@/mixins/tabbar-badge.js';
import { mapState,  mapMutations } from 'vuex';
export default {
    mixins: [badgeMix]
}

只用来读取的状态集中放在store中；

改变状态的方式是提交mutations，这是个同步的事物；

异步逻辑应该封装在action中。

在main.js引入store，注入。新建了一个目录store，….. export 。

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

state

Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

mutations

mutations定义的方法动态修改 Vuex 的 store 中的状态或数据。

getters

类似vue的计算属性，主要用来过滤一些数据。

action

actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({ //store实例
    state: {
        count: 0
    },
    mutations: {                
        increment (state) {
            state.count++
        }
    },
    actions: { 
        increment (context) {
            context.commit('increment')
        }
    }
})

modules

项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}
const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
}

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})

来源链接：segmentfault.com/a/119000001…