首页 > 其他分享> 文章详细

vuex的引入

2022-08-22 10:02:43 阅读：212 来源： 互联网

标签：const getters modules js 引入 vuex store

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

1、安装vuex

npm install vuex@next --save

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

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

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

目录结构如下

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
}

标签：const,getters,modules,js,引入,vuex,store
来源： https://www.cnblogs.com/MingYX/p/16611785.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vuex的引入