vue中使用vuex
首先創建一個store文件夾 在srore文件夾下 創建一個index.jx文件（文件夾命名看個人愛好）
State的使用(類似vue實列中的data數據源，來存取數據)
index.js文件中的內容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:0
}
})
export default store
father.vue中的內容，獲取state中的值
<template>
<div>
Store的使用
vue中的state的count值：{{count}}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
msg:1
};
},
computed:{
// 基本獲取
// count(){
// return this.$store.state.count
// },
// 利用輔助函數獲取state中的值 首先要先導入
// ...mapState({
// 第一種方法
// count: state => state.count,
// 第二種 // 傳字符串參數 'count' 等同於 `state => state.count`
//count: 'count'
//第三種想要使用this獲取局部狀態 必須使用常規函數
// count(state){
// return state.count + this.msg
// }
// })
//也可以這樣
...mapState(['count'])
},
};
</script>
<style scoped>
</style>
頁面效果
getter的使用(類似vue實列中的計算屬性，依賴宇state)
index.js文件中的內容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
todos: [
{ id: 1, text: 'name1', done: true },
{ id: 2, text: 'name2', done: false }
]
},
getters: {
// 傳一個參數，state就是vuex中state中的所有值
doneTodos: state => { //依賴於state中的值 類似計算屬性
return state.todos.filter(todo => todo.done) //過濾 只返回todo.done爲true的值
},
// 還可以傳兩個參數，第一個state就是vuex中state中的所有值，也可以接收也可以接受其他 getters 作爲第二個參數：
doneTodosCount:((state,getters)=>{
return getters.doneTodos.length
}),
//你也可以通過讓 getter 返回一個函數，來實現給 getter 傳參。在你對 store 裏的數組進行查詢時非常有用。
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
})
export default store
brothr.vur中的neir
<template>
<div>
<p>getter的使用</p>
<p v-for="(item,index) in doneTodos" :key="index" v-text="item.text"></p>
<p>{{doneTodosCount}}</p>
<p v-text="getTodoById(2).text"></p>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {};
},
created() {},
computed: {
//基本獲取
// doneTodos(){
// return this.$store.getters.doneTodos
// },
// //接收vuex中的getter中的doneTodos
// doneTodosCount(){
// return this.$store.getters.doneTodosCount
// },
// //調用接收vuex中的getter返回的函數getTodoById
// getTodoById(){
// console.log(this.$store.getters.getTodoById(2))
// return this.$store.getters.getTodoById(2)
// },
//利用計算屬性來獲取vuex中的getter 注意：先import導入
...mapGetters(["doneTodos", "doneTodosCount", "getTodoById"])
// 如果你想將一個 getter 屬性另取一個名字，使用對象形式：
// ...mapGetters({
// // 把 `this.doneCount` 映射爲 `this.$store.getters.doneTodosCount`
// done: 'doneTodos',
// doneTodos:doneTodosCount,
// getTodoBy:'getTodoById'
// })
}
};
</script>
<style scoped>
</style>
頁面展示效果
Mutation的使用(同樣依賴於state中的數據)
注意：Mutation 必須是同步函數
index.js中的內容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:1
},
//Mutation 必須是同步函數
mutations:{
add1(state){
state.count++;
},
//當然你也可以傳額外的參數 當然num也可以是一個對象
add2(state,num){
state.count+=num;
}
// add2(state,obj){
// state.count+=obj.num;
// }
}
})
export default store
father.vue中的內容
<template>
<div>
Mutation的使用
vue中的state的count值：{{count}}
<p><button @click="add">點擊調用vuex中的Mutation方法</button></p>
<p><button @click="adds(5)">點擊調用vuex中的Mutation方法</button></p>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
export default {
data() {
return {
msg:1
};
},
computed:{
...mapState(['count'])
},
methods:{
//add(){
// this.$store.commit('add1')
//this.$store.commit('add2',5) //傳字符串 或者 number類型的寫法
// this.$store.commit('add2',{num:5}) 這樣寫 傳對象 或者下邊這樣的寫法
// this.$store.commit({
// type:'add2',
// num:5
// })
//利用輔助函數 一樣先import導入
//},
// ...mapMutations(['add1','add2']),
// 或者可以換個命名 用對象的形式
...mapMutations({
add:'add1',
adds:'add2'
})
}
};
</script>
<style scoped>
</style>
頁面展示
Action的使用（可以進行異步的操作，同樣可以結合Promise使用，具體例子看官網https://vuex.vuejs.org/zh/guide/actions.html）
index.js中的內容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:1
},
//Mutation 必須是同步函數
mutations:{
add1(state){
state.count++;
},
//當然你也可以傳額外的參數 當然num也可以是一個對象
add2(state,num){
state.count+=num;
}
// add2(state,obj){
// state.count+=obj.num;
// }
},
//可以進行異步操作 用法和Mutation基本類似 都可以傳參 只不過觸發方法不一樣。
actions:{
add1(context){ //或者通過 context.state 和 context.getters 來獲取 state 和 getters。
context.commit('add1')
},
add2({commit}){
//actions不受限制 可以執行異步操作
setTimeout(() => {
commit('add2',5)
}, 1000);
}
}
})
export default store
father.vue中的內容
<template>
<div>
Mutation的使用
vue中的state的count值：{{count}}
<p><button @click="add">點擊調用vuex中的Mutation的add1方法</button></p>
<p><button @click="adds(5)">點擊調用vuex中的Mutation的add2方法</button></p>
<p><button @click="addAction1">點擊調用vuex中的Action的add1方法</button></p>
<p><button @click="addAction2">點擊調用vuex中的Action的add2方法</button></p>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
export default {
data() {
return {
msg:1
};
},
computed:{
...mapState(['count'])
},
created(){
},
methods:{
//add(){
// this.$store.commit('add1')
//this.$store.commit('add2',5) //傳字符串 或者 number類型的寫法
// this.$store.commit('add2',{num:5}) 或者像下邊這樣寫 傳對象
// this.$store.commit({
// type:'add2',
// num:5
// })
//利用輔助函數 一樣先import導入
//},
// ...mapMutations(['add1','add2']),
// 或者可以換個命名 用對象的形式
...mapMutations({
add:'add1',
adds:'add2'
}),
addAction1(){
this.$store.dispatch('add1')
},
addAction2(){
this.$store.dispatch('add2')
}
//同樣利用輔助函數 一樣先import導入 和mapMutations用法一樣 這裏就不一一詳細介紹
}
};
</script>
<style scoped>
</style>