1.安裝vuex

npm i --save-dev vuex 復制代碼

2.為了方便管理，在src目錄下新建文件夾store

新建index.js進行初始化 新建state.js進行數據存儲 新建mutations.js保存數據修改的方法 復制代碼

3.開始編寫配置文件

index.js

import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({// 存儲數據state,// 修改方法mutations }) 復制代碼

在main.js中引入并實例化

import store from '@/store/index' new Vue({el: '#app',router,// 實例化storestore,render: h => h(App) }) 復制代碼

4.到這里vuex已經配置完成，只要在state.js中寫入數據即可在項目中引用了

state.js

const state = { //這里以常用的用戶id為例，可以是任意你想保存的數據userId: '0123456789' } export default state 復制代碼

5.現在你就可以在項目中的任何組件取到用戶id，方法如下(關于map的作用就自己查閱資料吧)

import { mapState } from 'vuex' export default {computed: {...mapState({userId: state => state.userId})},// 然后在你需要的地方使用this.userId即可，如created () {console.log(this.userId)} } 復制代碼

6.關于修改state中屬性的值

還是以用戶id為例，每個用戶保存的值必然是不同的，這個值需要用mutations中的方法來修改

mutations.js

const mutations = { //save_userId是方法名， userId是傳入的修改值save_userId (state, userId) {state.userId = userId} }export default mutations 復制代碼

7.在需要保存用戶id的地方調用mutations中的方法進行保存

import { mapMutations } from 'vuex' export default { // 引入方法save_userId方法methods: {...mapMutations({save_userId: 'save_userId'})} // 保存或修改數據created () {this.save_userId('987654321')} } 復制代碼

8.到這里數據的存儲也完成了,取數據只要用第5步的方法即可，vuex的簡單使用也不復雜，希望剛入門的小伙伴看完有所收獲吧，之后有空在推出與actions相關的部分。

轉載于:https://juejin.im/post/5afcb72a6fb9a07aab2a0c3e

總結

以上是生活随笔為你收集整理的vuex状态管理简单入门的全部內容，希望文章能夠幫你解決所遇到的問題。

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