Vuex使用記錄

2021-09-02 13:02:15 字數 2566 閱讀 1453

最近在專案上使用vuex，從陌生到熟悉，整理一下使用思路和方法，加深印象。官方文件：

先明確幾個概念：

1.state:資料來源 。訪問：

this.$store.state.***x
2.getter:vuex的計算屬性。類似於computed裡面的操作函式。如果要在多個元件使用，提取到getter中，就會十分方便。在元件中使用：(getter 在通過方法訪問時，每次都會去進行呼叫，而不會快取結果)

this.$store.getters.gettodobyid(2)//方法


this.$store.getters.gettodobyid//通過屬性使用，會快取


export default


}
3.mutation：對state的操作全部在這裡進行。在嚴格模式下，不通過mutation直接對state進行操作將會報錯，而且使用mutation能夠記錄資料變更得過程。mutation必須同步執行。使用：

this.$store.commit('increment')//觸發mutation
export default 


}
4.action:action 類似於 mutation。1，action 提交的是 mutation，而不是直接變更狀態。這個怎麼解釋呢，就是action裡面做的操作時去呼叫mutation，這一步看起來有點多餘，但是它的真正的用途是第二點：action 可以包含任意非同步操作。使用：

this.$store.dispatch('increment')//觸發action
export default 


}
從0開始：vue-cli =》安裝vuex =》新建vuex檔案 =》註冊，配置vuex的index.js =》掛載到vue例項上。如果專案比較大，可以將state、mutation、action分開檔案單獨儲存。

// 引入actions, mutations, getters

import actions from "./actions.js"

import mutations from "./mutations.js"

import getters from "./getters.js"

//資料來源

const state =

export default new vuex.store()

掛載在vue上，在vue的main.js檔案中

import vueoption from '@/store'


function newvue () 


newvue()
在store檔案下新建乙個模組專屬的vuex檔案

這裡是新建了兩個模組的專屬vuex倉庫。

其中login裡面

export default ,


getters:,


},mutations:


},actions:


}}
store檔案的index.js

import vuex from 'vuex';


import login from './modules/login';


import confirmdata from './modules/confirmdata';


vue.use(vuex)


const store = new vuex.store( 


})export default store
然後和方案一 一樣掛載在vue例項上。

分模組後的用法除了資料來源因為被分割了區域性空間，在呼叫的時候要加上模組名：this.$store.state.login.***。getters\mutations\actions的依然被註冊在全域性，用法和方案一樣。

有幾個很重要的原則必須清晰：

應用層級的狀態應該集中到單個 store 物件中。

提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的。不能用類似this.$store.state.count = 2 這樣的**直接去修改倉庫的資料來源

非同步邏輯都應該封裝到 action 裡面。

vuex分析，記錄

最近專案中vuex用的比較多，特此記錄一下 vuex vue中的狀態管理，可用於儲存一些全域性的變數，方法，如購物車，token等 vuex中有state，getter，mutations，actions，modules這5個 state 元資料，類似於vuex中的data屬性中的值，原則上是不應該...

vuex填坑記錄

vuex是需要等待頁面載入完成後才會更新的，如果頁面點選重新整理有用到vuex的地方，那麼vuex會保持舊的資料，等重新整理完成後vuex的資料才會重置，所以要在頁面載入後再呼叫vuex的資料才是正確的，如果在created或者mounted階段鉤子函式內使用，那麼他的資料會是舊的資料導致出錯，所以...

vuex使用規則

下面利用webpack搭建平台。import vue from vue import vuex from vuex import index from index.vue vue.use vuex const store new vuex.store var root document.create...