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è)模塊僅存儲該模塊的狀態(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、使用
使用方法很簡單，只需在具體的.vue文件中引入相應(yīng)狀態(tài)即可
import { mapGetters } from "vuex";
computed: {
...mapGetters(["count"]),
},
如需改變狀態(tài)也很簡單，不需要額外引入，直接調(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法
今天小編就為大家分享一篇vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽storage的變化
這篇文章主要介紹了詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽storage的變化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)
這篇文章主要介紹了Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
基于Vue動(dòng)態(tài)實(shí)現(xiàn)進(jìn)度條的兩種方式
在 Vue 中動(dòng)態(tài)實(shí)現(xiàn)進(jìn)度條,基本上有兩種常見的方法：直接通過 Vue 數(shù)據(jù)綁定控制樣式,或者利用外部庫來實(shí)現(xiàn)更復(fù)雜的功能,我們會(huì)深入探討這兩種方式,并且詳細(xì)說明每種方法的實(shí)現(xiàn)步驟、優(yōu)缺點(diǎn)以及使用場景,需要的朋友可以參考下2025-07-07
詳解關(guān)于vue-area-linkage走過的坑
這篇文章主要介紹了詳解關(guān)于vue-area-linkage走過的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue實(shí)現(xiàn)模糊查詢的簡單方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)模糊查詢的簡單方法,在vue中,前端模糊搜索主要是用computed屬性實(shí)現(xiàn),本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
在使用vue框架的過程中,我們經(jīng)常需要給一些數(shù)據(jù)做一些初始化處理,這時(shí)候我們常用的就是在created與mounted選項(xiàng)中作出處理,這篇文章主要給大家介紹了關(guān)于Vue中created與mounted區(qū)別的相關(guān)資料,其中部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了詳解Vue-cli3.X使用px2rem遇到的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級
這篇文章主要介紹了使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10