关于 uni-app 使用vuex （模块化）

关于 uni-app 如何使用vuex（模块化）

第一步，先在一级目录创建store文件，然后创建一个index.js

import Vue from ‘vue’
import Vuex from ‘vuex’

import tabble from “./modules/tabble.js”; //这里为需要引入的模块

Vue.use(Vuex);

export default new Vuex.Store({
modules: {
tabble
}
});

然后在同级目录下创建modules文件 ，创建tabble.js
const state = {
TabbleList:[]
};

const getters = {
getTabbleList(state) {
return state.TabbleList
}
}

const mutations = {
setTabble(state,item){
state.TabbleList = item
}
}

const actions = {
commitTabbleList({commit},item){
console.log(item)
setTimeout(()=>{
commit(“setTabble”,item)
},500)
}
}

export default {
namespaced: true, //用于在全局引用此文件里的方法时标识这一个的文件名
state,
getters,
mutations,
actions
}

，然后我们需要把他引入，
//引入vuex
import store from ‘./store’
//把vuex定义成全局组件
Vue.prototype.$store = store

我们要调用vuex定义的方法
this.$store.dispatch(‘模块名称/该模块定义的方法’, 要传的参数)

如果我们要获取vuex定义的值
需要在页面引入
import {
mapGetters,
mapActions
} from ‘vuex’;
然后计算属性
computed: {
…mapGetters(“tabble”, {
tabbleList: “getTabbleList”
})
},
就能拿到tabble模块下的tabbleList