uni-app(VUE)中使用模块化使用VUEX
第一步创建对应的文件如下图:(uni-app自带了vuex 无需下载)index.js代码:可直接复制使用import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex)// 把modules文件下的 js文件返回出来// https://webpack.js.org/guides/dependency-management/#requirec
·
第一步创建对应的文件如下图:(uni-app自带了vuex 无需下载)
index.js代码:可直接复制使用
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
// 把modules文件下的 js文件返回出来
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules
})
export default store
在main.js 文件中注册
import Vue from 'vue'
import App from './App'
import store from 'store/index.js'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView);
const app = new Vue({
...App,
store
})
app.$mount()
然后在模块化中创建文件home.js,vc.js
//home.js
export default{
namespaced: true,//命名空间必须写
state: {
// 第一个页面参数
pickerVal:'1111'
},
getters:{
getState(state){
return state;
}
},
//唯一修改state值的方法
// commit
mutations: {
},
// 异步的操作
// dispatch
actions: {
}
}
//vc.js
export default{
namespaced: true,//命名空间必须写
state: {
// 第一个页面参数
pickerValc:'22'
},
getters:{
getState(state){
return state;
}
},
//唯一修改state值的方法
// commit
mutations: {
setPickerValc(state,data){
state.pickerValc = data;
}
},
// 异步的操作
// dispatch
actions: {
subAsy({commit},data){
setTimeout(res =>{
commit('pickerValc',data)
},1000)
}
}
}
在页面中使用
// 使用vc.js 函数
this.$store.commit('vc/setPickerValc',1112233)
console.log(this.$store.state.vc.pickerValc);
console.log(this.$store.getters['home/getState']);
//使用home.js 函数只是把vc 换成对应文件名
//其他方式使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
//mapState,mapGetters 在 computed 中使用;
//mapMutations,mapActions 在 methods中使用;
computed:{
...mapState({'data':'data'}), //多文件使用方式 前面data变量 后面data页面
...mapState('global',{ // global是js文件名 userData是变量 user是global里面的变量
userData:'user'
})
...mapGetters(['getName','getAge'])
}
methods:{
...mapMutations(['setName','setAge']),
...mapActions(['funcSetName','funSetAge'])
}
Vuex的...mapstate和...mapmutations以及...mapActions的使用_Litt_White的博客-CSDN博客
更多推荐
已为社区贡献2条内容
所有评论(0)