一、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內(nèi)，將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步，進(jìn)行封裝和使用：需要新建文件如下：兩個模塊是為了區(qū)分不同組件模塊的vuex數(shù)據(jù)，方便維護(hù)管理

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, // 分成模塊維護(hù)getters })export default store

2.2在store/getters.js內(nèi)引入每個模塊的data：（vuex的所有的data變量都可以在這個文件內(nèi)看到）

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.狀態(tài)變量 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.異步調(diào)用mutations內(nèi)的修改state的方法 const actions = {changeId({ commit }, data = Number) {commit('SET_ID', data)} }// 4.變量暴露出去 export default {namespaced: true,state,mutations,actions }

具體實現(xiàn)vuex的取值和存值：可看組件vuexData.vue和semoData.js兩個文件，對應(yīng)關(guān)系如下，箭頭已表明

通過vuex插件，可以直接看到數(shù)據(jù)變化

以上2.1-2.3就是全部封裝和使用的過程

.
.
.
.
.
.
.
.
.
.
以下個文件詳細(xì)代碼 可不看
.
.
.
.
.
.
.
.
.
.
.
.
.
.

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, // 分成模塊維護(hù)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.狀態(tài)變量 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.異步調(diào)用mutations內(nèi)的修改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調(diào)接口存值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調(diào)用方法存值 注意vuex方法路徑this.$store.commit('someData/GET_KARR', res.data)})},setUrl() {getUrl().then(res => {// 2.直接將接口數(shù)據(jù) 傳遞給actions賦值（推薦做法）this.$store.dispatch('someData/changeUrl', res.data)})},setClass() {const data = 1932115674972160// 3.調(diào)用actions內(nèi)的方法-讓其自己調(diào)接口傳值this.$store.dispatch('someData/changeSet', data)}} } </script><style> </style> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vuex的使用和封装的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。