vuex踩坑日誌(一)
阿新 • • 發佈:2019-01-29
VUEX踩坑日誌
我使用的是vue-cli+vuex,vue-cli的安裝和使用想必就不用我多說了,我這裡主要說一下vuex在vue-cli中的使用方法
首先在你的vue-cli下安裝vuex
npm install vuex --save--dev
在你的src目錄下新建一個Store資料夾,用來存放store.js等等
store
|+store.js
|+action.js
|+mutation.js
|+state.js
|+getter.js
每個對應js對應其相應的功能,然後通過export default 暴露出去
State
State負責儲存整個應用的狀態資料,一般需要在使用的時候在跟節點注入store
物件,後期就可以使用this.$store.state
直接獲取狀態
modules
前面說過不論是多大的一個應用,都只有一個store,當應用郭大師store就會變得龐大,為了解決以上的問題,引入modules,可以分割store,每個模組擁有自己的statemutataion action getter等,甚至可以巢狀子模組
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
功能1:元件直接從store中讀取某個狀態
state.js
const state = {
msg: '原始資料' ,
}
export default state;
store.js
import Vue from "vue";
import Vuex from "vuex";
import state from "./state.js";
Vue.use(Vuex) //這裡注意,一定要使用一下
const store=new Vue.Store({
state
})
export default store;
然後需要在main.js中引用一下
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store/store.js";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});
在元件中
<template>
<div class="abc">
<input type="text" value="abc">
<div>{{msg}}</div>
<button>按鈕</button>
</div>
</template>
<script>
//通過this.$store.state.msg
export default {
data(){
return {
msg:this.$store.state.msg,
}
},
}
</script>
<style scoped></style>
功能2:做一個能記錄點選次數的功能
首先需要對mutation要有一個瞭解,mutation是修改store中State的唯一方法,在vuex中mutation是同步事務
mutations.js
const mutation={
change(state){
state.count++;
alert(state.count)
}
};
export default mutation;
store.js中引入
import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutation.js";
Vue.use(Vuex);
//定義資料
var state={
count:0
};
var store=new Vuex.Store({
state,
mutations
});
export default store;
同樣需要在main.js中掛載
元件中
<template>
<div class="abc">
<input type="text" :value="names">
<div>{{names}}</div>
<button @click="clicks">按鈕</button>
</div>
</template>
<script>
export default {
data(){
return {
names:this.$store.state.names,
}
},
methods:{
clicks(){
this.$store.commit("change");
}
}
}
</script>
mutation雖然能修改狀態,但是他是同步的有時候滿足不了我們的需求,此時就需要action來幫忙
action類似於mutation,但也有不同之處
- action提交的是mutation,不能直接變更狀態
- action是非同步的
用法如下
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment') //呼叫mutations裡的方法,而不是自己直接修改State
}
}
})
功能3:通過getter派生出一個新的State
有些狀態需要做二次處理需要使用getter方法
getter.js
const getters={
arrLength:(state)=>{
state.arr.length
}
};
export default getters;
以上程式碼的意思是通過讀取state中arr屬性,派生出一個新的屬性arrLength
state
var state={
count:0,
arr:[1,2,3]
};
store.js和上面的一樣
元件
<template>
<div class="abc">
<input type="text" :value="names">
<div @click="len">{{names}}</div>
<button @click="clicks">按鈕</button>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data(){
return {
names:this.$store.state.names,
}
},
methods:{
clicks(){
this.$store.commit("change");
},
len(){
console.log(this.$store.state) //這裡檢視有沒有通過gettter方法派生出來新的state
}
},
computed:mapGetters([
'arrLength'
])
}
</script>
<style scoped></style>