vuex使用方法超詳細(xì)講解(實(shí)用)
前言
1、官方文檔比較正式詳細(xì)，但看完之后依然一臉懵逼，不知道具體該怎么使用。
2、本文內(nèi)容是結(jié)合自己在項(xiàng)目開發(fā)中總結(jié)的比較好用的一種用法。
3、寫這篇文章主要目的是為了自己找資料時(shí)方便，同時(shí)也分享一下自己的經(jīng)驗(yàn)，方便他人使用。
一、什么是vuex?
這個(gè)沒什么好說的，官網(wǎng)已經(jīng)描述的很詳細(xì)了，點(diǎn)擊下方鏈接可直達(dá)。
二、vuex具體用法
1、安裝
兩種方法都可以
npm install vuex --save yarn add vuex
在main.js中引入
import store from './store';
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
2、添加文件
項(xiàng)目完整目錄如下
3、每個(gè)文件具體配置
<1>、modules
modules里面添加js文件，命名隨意，建議按照模塊命名，每個(gè)模塊僅存儲(chǔ)該模塊的狀態(tài)。
示例：假設(shè)里面創(chuàng)建了一個(gè) form.js 和 user.js 兩個(gè)文件
form.js
const state = {
count: 0 // 數(shù)量
};
const mutations = {
SET_COUNT: (state, data) => {
state.count++;
}
};
const actions = {};
export default {
state,
mutations,
actions
};
user.js
const state = {
name: 0, // 姓名
age: 0, // 年齡
};
const mutations = {
SET_NAME: (state, data) => {
state.name = data;
},
SET_AGE:(state, data) => {
state.age = data;
};
const actions = {};
export default {
state,
mutations,
actions
};
<2>、getters.js
所有使用的狀態(tài)在這里都要列出來
const getters = {
count: state => state.form.count,
name: state => state.user.name,
age: state => state.user.age
}
export default getters
<3>、index.js
modules中創(chuàng)建的文件在index.js中引入一下
import Vue from 'vue'
import Vuex from 'vuex'
import form from './modules/form'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
form,
user
},
getters
})
export default store
4、使用
使用方法很簡(jiǎn)單，只需在具體的.vue文件中引入相應(yīng)狀態(tài)即可
import { mapGetters } from "vuex";
computed: {
...mapGetters(["count"]),
},
如需改變狀態(tài)也很簡(jiǎn)單，不需要額外引入，直接調(diào)用方法即可
this.$store.commit("SET_COUNT");
this.$store.commit("SET_NAME", '張三');
this.$store.commit("SET_AGE", 20);
后記
至于具體狀態(tài)如何應(yīng)用就不做贅述了，跟普通數(shù)據(jù)一樣；
到此這篇關(guān)于vuex使用方法的文章就介紹到這了,更多相關(guān)vuex使用方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中keep-alive的用法及問題描述,本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值，需要的朋友可以參考下2018-05-05
本文主要介紹了vue-element-admin下載到登錄的一些坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue中的傳值及賦值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3組合式API之getCurrentInstance詳解
我們可以通過?getCurrentInstance這個(gè)函數(shù)來返回當(dāng)前組件的實(shí)例對(duì)象,也就是當(dāng)前vue這個(gè)實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于Vue3組合式API之getCurrentInstance的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue中的.$mount(''#app'')手動(dòng)掛載操作
這篇文章主要介紹了vue中.$mount('#app')手動(dòng)掛載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)時(shí)器的用法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue項(xiàng)目如何分環(huán)境部署問題，具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2018-12-12
詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)
最近在用vue做移動(dòng)端項(xiàng)目，網(wǎng)上找了一些移動(dòng)端適配的方案，個(gè)人覺得手淘團(tuán)隊(duì)flexible.js還是比較容易上手，在這里做下總結(jié)。對(duì)vue.js移動(dòng)端配置flexible.js 相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要介紹了15 分鐘掌握vue-next響應(yīng)式原理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue中el-table前端如何導(dǎo)出excel數(shù)據(jù)表格
這篇文章主要介紹了vue中el-table前端如何導(dǎo)出excel數(shù)據(jù)表格,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07