vuex使用方法

前言

1、官方文檔比較正式詳細，但看完之后依然一臉懵逼，不知道具體該怎么使用。
2、本文內容是結合自己在項目開發中總結的比較好用的一種用法。
3、寫這篇文章主要目的是為了自己找資料時方便，同時也分享一下自己的經驗，方便他人使用。

一、什么是vuex?

這個沒什么好說的，官網已經描述的很詳細了，點擊下方鏈接可直達。

vuex官方文檔

二、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、添加文件

項目完整目錄如下

3、每個文件具體配置

<1>、modules

modules里面添加js文件，命名隨意，建議按照模塊命名，每個模塊僅存儲該模塊的狀態。
示例：
假設里面創建了一個 form.js 和 user.js 兩個文件
form.js

const state = {count: 0 // 數量 };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

所有使用的狀態在這里都要列出來

const getters = {count: state => state.form.count,name: state => state.user.name,age: state => state.user.age } export default getters

<3>、index.js

modules中創建的文件在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文件中引入相應狀態即可

import { mapGetters } from "vuex";computed: {...mapGetters(["count"]), },

如需改變狀態也很簡單，不需要額外引入，直接調用方法即可

this.$store.commit("SET_COUNT"); this.$store.commit("SET_NAME", '張三'); this.$store.commit("SET_AGE", 20);

后記

至于具體狀態如何應用就不做贅述了，跟普通數據一樣；
如有錯漏之處還望看到的同學可以在評論中指出，我會不定時進行更新；
至此，全文結束。

總結

以上是生活随笔為你收集整理的vuex使用方法（详细实用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。