vuex的引入


官方文档可以解决一切问题。

1、安装vuex

npm install [email protected] --save

如果版本和你的vue版本不符合,可以根据提示,在@后加上适合的版本号再安装。

安装成功之后会在packjson中表明vuex的版本号

vuex的引入

2、新建一个store文件夹,和main.js同级

目录结构如下

vuex的引入

 

 index.js是需要配置引入vuex的文件,getters.js是一些vuex中的快捷引用

modules是vuex中的模块,其下的js文件是vuex的存储

3、配置index.js

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 import getters from './getters'
 4 
 5 Vue.use(Vuex)
 6 
 7 // 读取modules文件夹
 8 const modulesFiles = require.context('./modules', true, //.js$/)
 9 
10 // 递归获取文件夹下的所有文件
11 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
12   // set './app.js' => 'app'
13   const moduleName = modulePath.replace(/^/.//(.*)/./w+$/, '$1')
14   const value = modulesFiles(modulePath)
15   modules[moduleName] = value.default
16   return modules
17 }, {})
18 
19 const store = new Vuex.Store({
20     modules,
21     getters
22   })
23   
24 export default store

4、配置main.js

import store from './store' // 引入vuex的store
new Vue({
  store
}).$mount('#app') // 在vue中挂载

5、getters的写法

const getters = {
  sidebar: state => state.app.sidebar 
// 名称: 箭头函数(state/所需模块) => 引用的对象
}
export default getters

6、modules下的js写法

const state= {}
const getters= {}
const mutations= {}
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/281597.html

(0)
上一篇 2022年8月22日
下一篇 2022年8月22日

相关推荐

发表回复

登录后才能评论