uni-app 使用vuex（vuex module）

标签：方法   space   names   vuex   getters   efault   type   context   文件夹   

1：uni-app 集成了vuex 直接在根目录下创建store文件夹 新建store.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import ‘模块名称’ from ‘模块路径‘;

Vue.use(Vuex);

const $store = new Vuex.Store({
　　modules: {
　　　　‘引入的模块名称’,
　　}
});
export default $store;

2：在main.js中引入挂载store

import store  from ‘./store/store.js‘

Vue.prototype.$store = store 

3：在store文件夹下新建文件 ‘模块名称’

新建：

actions.js

getters.js

index.js

mutations.js

state.js

types.js

4:在index.js中引入

import state from ‘./states‘;
import getters from ‘./getters‘;
import mutations from ‘./mutations‘;
import actions from ‘./actions‘;

export default {
　　namespaced: true, //namespaced写成true，意思就是可以用这个module名作为区分了
　　state,
　　mutations,
　　actions,
　　getters
};

5：actions.js

import * as TYPES from ‘./types‘  //actions分发事件类型 
const actions = {
　　changeNum(context){
　　　　context.commit(TYPES.CHANGE_NUM)
　　}
};
export default actions

6：getters.js

const getters = {

};
export default getters

7：mutations.js

import * as TYPES from ‘./types‘
const mutations = {
　　[TYPES.CHANGE_NUM](state){
　　　　state.number = state.number+1
　　},
};

export default mutations

8:types

export const CHANGE_NUM = ‘CHANGE_NUM‘;

9:在组件中使用

computed:{
　　...mapState({
　　　　number:({模块名称})=>模块名称.number,
　　})
},

methods: {
...mapActions({
　　　　add:‘模块名称/模块下的方法‘
　　})
}

uni-app 使用vuex（vuex module）

标签：方法   space   names   vuex   getters   efault   type   context   文件夹   

原文地址：https://www.cnblogs.com/sww-blog/p/11066924.html