Vuex數據的存儲與獲取方式
Vuex數據存儲與獲取
因為最近需要對原有項目進行改造，之前沒有認真研究過vuex的使用，今天把學習官方文檔的過程記錄下來以供日後查閱，同時也希望能夠為其他開發人員提供參考。
vuex的核心點是store，store本質上是一個倉庫，它可以存儲大部分的state。而這種存儲是響應式的，如果state發生變化，那麼對應的組件也會響應更新。如果想要改變state，那麼需要通過commit mutation。
以下示例引用自官網（開始 | Vuex）
// 創建一個新的 store 實例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state) {
state.count++
}
}
})
創建完成後可在vue組件中可以以this.$store.commit('具體mutation方法')來提交狀態變更
然後通過this.$store.state.x具體某一statex來得到對象的內容。
如果想要更簡便的從store實例中讀取狀態，可以直接在computed中返回某個狀態：
// 創建一個 Counter 組件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
但是為瞭避免多次出發dom，vue插件可以將store實例從跟組件中註入到所有的子組件中，子組件可以通過$store訪問。
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
當我們需要的狀態為多個時，可以利用mapState來生成計算屬性
computed: {
localComputed () { /* ... */ },
// 使用對象展開運算符將此對象混入到外部對象中
...mapState({
// ...
})
}
可以舉一個實際應用的例子
首先在main.js中註冊
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
//存放全局狀態
state:{
count:0
},
//getters是對state的加工包裝，比如將一些數據進行過濾等，為隻讀的方法，通過return獲取值
getters:{
countNum(state){
return `the account NUm is ${state.count}`
}
}
//通過mutations修改state，如果直接修改state會導致一些特性丟失
mutations:{
add(state){
state.count++
},
minus(state){
state.count--
}
}
//actions涉及業務邏輯，不涉及頁面的一些行為
})
在對應的vue組件中，如下代碼可在頁面顯示count的值，則可在vue的一個組件例如app.vue中進行如下操作
<template>
<div>
<h1>{{count}}</h1>
<h2>{{countNum}} </h2>
</div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default{
//
computed:{
...mapState(['count'])
...mapGetters{['countNum']}
}
}
</script>
若想使用mutation中的方法，則可在另一個vue文件例如hello.vue中進行如下操作，同時為瞭方便觀察，在控制臺中可以選擇vuex實時觀察vue內容
<template> <div> <button @click=addnum>增加</button> </div> </template>
methods：{
...mapMutations('add','minus')
addnum（）{
//mutations必須通過commit才能使用,但是因為之前調用瞭...mapMutations,所以可以直接調用this.add();
//this.$store.commit('add')
this.add()
//使用mutations會確保有vuex狀態改變的記錄，如果直接this.$store.state.count也會生效
//this.$store.state.count++但是此種寫法開發工具vuex裡面無法產生記錄
}
}
<javascript>
</javascript>
一般情況下，簡單的業務邏輯要寫在mutation裡，復雜的業務邏輯要寫在actions裡
Vuex存值與取值(簡單易懂)
組件內存值
methods: {
fn() {
this.$store.commit('setValue',xxx) //setValue存值隨便起個名, xxx要存的值
}
}
store.js的state中
const state = {
xxx:'',//把存的那個值的名字初始化一下
}
store.js的matution中
setValue(state,item){
state.xxx= item;//第二個參數隨意起個名
},
組件內取值
//在計算屬性中取值,js直接這樣寫拿到值,html用直接xxx使用
computed: {
value() {
return this.$store.state.xxx;
}
},
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。