vuex的使用和封装

一、Vuex基本使用
1.下载vuex依赖

npm install vuex --save

2.在src/store/index.js下引入使用

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {}
})

3.在main.js内，将store对象挂载到vue实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

二、重点是将第2步，进行封装和使用：需要新建文件如下：两个模块是为了区分不同组件模块的vuex数据，方便维护管理

2.1 store下的index.js修改：引入modules和getters

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'Vue.use(Vuex)const modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {// set './app.js' => 'app'const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')const value = modulesFiles(modulePath)modules[moduleName] = value.defaultreturn modules
}, {})const store = new Vuex.Store({modules, // 分成模块维护getters
})export default store

2.2在store/getters.js内引入每个模块的data：（vuex的所有的data变量都可以在这个文件内看到）

const getters = {// 注意引入的路径是每个模块下的dataname: state => state.user.name,url: state => state.someData.url,kArr: state => state.someData.kArr,classArr: state => state.someData.classArr
}
export default getters

2.3store/user.js 包含一个完整的vuex模块，state变量 mutations同步方法 actions异步方法

// 一个完整的模块// 1.状态变量
const state = {name: 'xiaoming',id: -1
}// 2.同步方法 修改state变量
const mutations = {SET_NAME: (state, data = '') => {state.name = data},SET_ID: (state, data = Number) => {state.id = data}
}// 3.异步调用mutations内的修改state的方法
const actions = {changeId({ commit }, data = Number) {commit('SET_ID', data)}
}// 4.变量暴露出去
export default {namespaced: true,state,mutations,actions
}

具体实现vuex的取值和存值：可看组件vuexData.vue和semoData.js两个文件，对应关系如下，箭头已表明

通过vuex插件，可以直接看到数据变化

以上2.1-2.3就是全部封装和使用的过程

.
.
.
.
.
.
.
.
.
.
以下个文件详细代码可不看
.
.
.
.
.
.
.
.
.
.
.
.
.
.

2.4具体6个文件代码：

2.4.1 marn.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

2.4.2 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'Vue.use(Vuex)const modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {// set './app.js' => 'app'const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')const value = modulesFiles(modulePath)modules[moduleName] = value.defaultreturn modules
}, {})const store = new Vuex.Store({modules, // 分成模块维护getters
})export default store

2.4.3 getters.js

const getters = {// 注意引入的路径是每个模块下的dataname: state => state.user.name,url: state => state.someData.url,kArr: state => state.someData.kArr,classArr: state => state.someData.classArr
}
export default getters

2.4.4user.js

// 一个完整的模块// 1.状态变量
const state = {name: 'xiaoming',id: -1
}// 2.同步方法 修改state变量
const mutations = {SET_NAME: (state, data = '') => {state.name = data},SET_ID: (state, data = Number) => {state.id = data}
}// 3.异步调用mutations内的修改state的方法
const actions = {changeId({ commit }, data = Number) {commit('SET_ID', data)}
}// 4.变量暴露出去
export default {namespaced: true,state,mutations,actions
}

2.4.5someData.js

import { getClass } from '@/api/way.js' // 接口方法
const state = {kArr: [],url: '',classArr: []
}
const mutations = {// 1.通过commit存值GET_KARR: (state, data = []) => {state.kArr = data},// 2.通过dispatch存接口值SET_URL: (state, data = '') => {state.url = data},// 3.通过直接actions调接口存值SET_CLASSARR: (state, data = []) => {state.classArr = data}
}
const actions = {// 2.changeUrl({ commit }, data = '') {commit('SET_URL', data)},// 3.changeSet({ commit }, data = Number) {getClass(data).then(res => {commit('SET_CLASSARR', res.data)})}}
export default {namespaced: true,state,mutations,actions
}

2.4.6vuexData.vue

<template><div>name:{{ name }} <br>url:{{ $store.state.someData.url }}<div><button @click="getKList">点击获取知识点 commit存入vuex</button><button @click="setUrl">点击actions url</button><button @click="setClass">点击actions</button></div></div>
</template>
<script>
import { getKnowledgeIdByChapterIds, getUrl } from '@/api/way.js'
export default {data() {return {}},computed: {name() {return this.$store.state.user.name}},methods: {getKList() {this.$store.commit('user/SET_NAME', '小明')const data = {chapterIds: [22394],schoolId: 39}getKnowledgeIdByChapterIds(data).then(res => {//   1.直接commit调用方法存值 注意vuex方法路径this.$store.commit('someData/GET_KARR', res.data)})},setUrl() {getUrl().then(res => {//   2.直接将接口数据 传递给actions赋值（推荐做法）this.$store.dispatch('someData/changeUrl', res.data)})},setClass() {const data = 1932115674972160//   3.调用actions内的方法-让其自己调接口传值this.$store.dispatch('someData/changeSet', data)}}
}
</script><style>
</style>

vuex的使用和封装相关推荐

手把手带你封装一个vue移动端的脚手架
本文基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架,开箱即用,让开发变得更简单.想看源代码请点击"阅 ...
后台集成解决方案 avue
简介 avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),它基于 Vue.js 和 element.它使用了最新的前端技术栈,权限验证,第三方网站嵌套等功能,很多功能还在开发 ...
uni-app开发中遇到的问题（持续更新...）
uni-app开发中遇到的问题详情页面返回上一页,并刷新列表 components中的组件无需引入分离页面的js.css文件设置页面颜色出现分层 uni-app端无法显示图片 uniapp如何取 ...
vuejs2.0 高级实战全网稀缺音乐WebAPP
src简单的介绍入口文件main.js import 'babel-polyfill' //写在第一位 import Vue from 'vue' import App from './App' i ...
【项目总结】项目开发规范
目录背景后端规范一.接口api规范 1.接口风格接口风格统一采用restful规范 2.接口api命名规范 3.接口参数规范 4.接口响应数据/状态码规范 4.1响应数据结构 4.2Http状态 ...
vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
coderwhy-vue-supermall笔记
GitHub项目地址文章目录一.耦合解耦: 例:封装多个数据的请求二.发送网络请求 created 保存数据简化 created 中的代码三.保存大量数据 1. home页面中的分类数据 ...
coderwhy老师vue.js b站视频教程笔记——第一部分
原创不易,转载请注明出处,谢谢! 第一部分:Vue基础语法--组件化开发--模块化开发--webpack Day 01 01.(了解)vue.js课程介绍 Vue.js课程学习路线 Vue基础语法-- ...
一枚程序媛，献上开箱即用的 vue+vant 方案
"开箱即用,让开发变得更简单" github:https://github.com/sunniejs/vue-h5-template 作者:花花小仙女基于 vue-cli4.0+ ...

vuex的使用和封装

vuex的使用和封装相关推荐

最新文章

热门文章