uni-app(四)小程序里的vuex
项目一旦开始庞大起来,就会用到vuex了,我们都知道,它是状态存储管理器,相对于本地存储,更加轻量和安全
在小程序里,其实和平时的vue项目里 vuex 使用方法是一样的,所以我们如法炮制
- main.js 同级创建 store 文件夹,再在文件夹里,创建 index.js、getters.js、data.js
- 在 main.js 中引入 vuex
import store from '@/store' const app = new Vue({ ... store }) app.$mount()
- index.js,注册 vuex,并引入相关文件
import Vue from 'vue' import Vuex from 'vuex' import data from './data' import getters from './getters' Vue.use(Vuex) const store = new Vuex.Store({ modules: { data }, getters }) export default store
- data.js,操作数据的核心文件,包含了 state、mutations、actions 三大属性
const data = { state: { id: 0, name: '哈皮' }, mutations: { set_name: (state, res) => { state.id = res.id state.name = res.name } }, actions: { getList: async ({ commit }, params = {}) => { let res = await uni.service.getList(params) commit('set_name', res) return res } } } export default data
- getters.js,输出处理完成的数据
const getters = { id: state => state.data.id, name: state => state.data.name } export default getters
- 存储、修改、获取
// 存储、修改,有两种方法 // 第一种是 actions,执行commit,再mutations, let obj = { ... } this.$store.dispatch('getList', obj) // 第二种是直接提交 commit,执行 mutations this.$store.commit('set_name', obj) // 获取 let id= this.$store.getters.id let name = this.$store.getters.name console.log(id,name)