1.在store文件下新建需要的文件也就是小仓库如:home/index.js 写完小仓库需要合并到大仓库
使用vuex前下载安装:npm i vuex@3
2022年2月7日,vue3成为默认版本,如果直接npm i vue 安装的直接就是vue3了,并且vue3成为默认版本的同时,vuex也更新到了4版本,那么也就是说如果我们直接npm i vuex安装的是vuex4,而vuex的4版本只能在vue3中使用,vue2中要用vuex的3版本,vue3中要用vuex的4版本,所以使用vue2要安装vuex3, : npm i vuex@3
需要在入口文件(main.js)注册vuex仓库:
import Vue from 'vue'
import App from './App.vue'
//引入仓库
import store from '@/store'
new Vue({
render:h =>h(App),
//注册仓库,组件实例的身上会多一个属性$store属性
store,
}).$mount("#app");
A. store/module/home/index.js(小仓库)
//home模块的小仓库
const state ={};
const mutations ={};
const actions ={};
const getters ={};
export default {
state,
mutations,
actions,
getters
}
B.store/store.js(大仓库)
第一种写法
import Vue from 'vue'
import Vuex from 'vuex'//Vuex其实是一个对象,对象身上有一个store方法,而这个方法是一个构造函数
//需要使用插件一次
Vue.use(Vuex)
//引入小仓库
import home feom './home'
import search from './search'
//对外暴露Store类的一个实例
export default new Vuex.Store({
//实现Vuex仓库模块式开发存储数据
modules:{
home,
search
}
})
第二种写法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 适用于划分各个模块,而各个模块要一个一个引入,太麻烦了,这是就用到了require.context
// require.context函数接受三个参数:
// directory {String} -读取文件的路径
// useSubdirectories {Boolean} -是否遍历文件的子目录
// regExp {RegExp} -匹配文件的正则
const modulesFiles = require.context('./module', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
//reduce callback函数第一个参数是上一次回调函数的返回值,或者提供的初始值(initialValue)
//callback函数第二个参数是当前正在处理的元素
//reduce方法第二个参数写的是[],modules就是数组。
//reduce方法第二个参数写的是{},modules就是对象。
export default new Vuex.Store({
modules
})