Vue2.0教程（六）Vuex配置和调用

燃燃的大尾巴

已于 2022-07-26 17:06:30 修改

阅读量278

点赞数 1

分类专栏： vue2 脚手架搭建文章标签： vue.js javascript 前端

于 2022-07-25 15:42:28 首次发布

本文链接：https://blog.csdn.net/qq_38120798/article/details/125976569

版权

vue2 脚手架搭建专栏收录该内容

13 篇文章 8 订阅

订阅专栏

本文介绍了如何在Vue项目中使用Vuex进行状态管理，包括创建`modules`文件夹来组织不同模块，如`user.js`用于存储用户信息。`getters.js`则用于定义计算属性式的获取状态，例如获取user.js中的token。最后，在`index.js`中整合所有模块并导出Vuex store，以便在应用中使用。

摘要由CSDN通过智能技术生成

Vuex讲解

一、src/store （因为我们脚手架安装时选择了 vuex）

1.这里我们需要创建几个文件夹

2.modules 文件夹 (一些vuex 存储)

user.js （用户信息存储）



const user = {
  state: {
    token: '12121',
    user: {},
  },
    
  mutations:{
      
  },
  
  actions:{
    
  }
}

export default user

3.getters.js 文件名

getters （相当于计算属性。参数的调用）

const getters = {
  token: state => state.user.token, // 访问 user.js 下的 state里面的 token 字段
}
export default getters

4.index.js (修改存在的index.js)

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// 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,
  getters
})

export default store