vuex
????主要應(yīng)用于vue.js中管理數(shù)據(jù)狀態(tài)的一個庫
????通過創(chuàng)建一個集中的數(shù)據(jù)存儲嵌器，供程序中所有組件訪問
vuex核心概念：state具帮、getters、mutations、actions郊丛、module
一虫给、vuex 安裝引入
1、安裝vuex
npm install vuex --save
2辫封、vue項目中導(dǎo)入vuex
在src目錄下新建store/store.js文件硝枉，在該js文件中引入vuex
//1.引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
//2.使用vuex
Vue.use(Vuex)
//3.創(chuàng)建store數(shù)據(jù)源，提供唯一公共數(shù)據(jù)
const store = new Vuex.Store({
//state存放公共基礎(chǔ)數(shù)據(jù)
state:{
},
//對數(shù)據(jù)的處理
getters:{
}
//4.向外暴露store數(shù)據(jù)倉庫倦微，這樣其他vue組件才能使用store內(nèi)的數(shù)據(jù)
export default store
3妻味、將store對象掛載到vue實例中
在src/main.js下
//1.引入store
import store from './store/store'
new Vue({
//2.掛載store對象
store:store,
})
4、在vue組件中使用store.js內(nèi)的數(shù)據(jù)
????使用computed計算屬性欣福，通過調(diào)用this.$store.state.屬性名责球，獲取到需要的數(shù)據(jù)。
html:
<div>
<h2>product-list-one:</h2>
<ul>
//2.使用數(shù)據(jù)
<li v-for="product in products">{{product.name}}--{{product.price}}</li>
</ul>
</div>
js:
computed:{
//1.獲取store.js中的數(shù)據(jù)
products(){
return this.$store.state.products
},
}
二拓劝、state:{}
????state 提供唯一的公告數(shù)據(jù)源雏逾，所有共享的數(shù)據(jù)都要統(tǒng)一放到 store 的 state 中進(jìn)行存儲。我們需要保存的數(shù)據(jù)就保存在這里郑临，可以在組件頁面通過 this.$store.state.屬性名來獲取我們定義的數(shù)據(jù)栖博。
組件訪問store中數(shù)據(jù)的兩種方式:
1、this.$store.state.屬性名
store.js中定義數(shù)據(jù)
//1.引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
//2.使用vuex
Vue.use(Vuex)
//3.創(chuàng)建store數(shù)據(jù)源厢洞，提供唯一公共數(shù)據(jù)
const store = new Vuex.Store({
//state存放公共基礎(chǔ)數(shù)據(jù)
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
]
},
//對數(shù)據(jù)的處理
getters:{
}
//4.向外暴露store數(shù)據(jù)倉庫仇让，這樣其他vue組件才能使用store內(nèi)的數(shù)據(jù)
export default store
vue組件中使用store.js數(shù)據(jù)
html:
<div>
<h2>product-list-one:</h2>
<ul>
//2.使用數(shù)據(jù)
<li v-for="product in products">{{product.name}}--{{product.price}}</li>
</ul>
</div>
js:
computed:{
//1.獲取store.js中的數(shù)據(jù)
products(){
return this.$store.state.products
},
}
2、將store.js數(shù)據(jù)犀变，映射為當(dāng)前組件的計算屬性
在store.js中定義屬性msg
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
msg:'映射為計算屬性'
},
})
export default store
在組件中映射屬性為計算屬性
<template>
<div>
//3.使用store中定義的msg屬性
<span>{{msg}}</span>
</div>
</template>
<script>
// 1.從 vuex 中按需導(dǎo)入 mapState 函數(shù)
import { mapState } from 'vuex'
export default {
name: "ProductListOne",
computed:{
// 2.將全局?jǐn)?shù)據(jù)妹孙，映射為當(dāng)前組件的計算屬性
...mapState(['msg'])// 用...展開運算符把 msg展開在資源屬性里
}
}
</script>
三、getters:{}
????Getter 用于對 Store 中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)获枝。不會修改 state 里的源數(shù)據(jù)蠢正，只起到一個包裝器的作用，將 state 里的數(shù)據(jù)變一種形式然后返回出來省店。
① Getter 可以對 Store 中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)嚣崭，類似Vue的計算屬性笨触。
② Store 中數(shù)據(jù)發(fā)生變化，Getter 包裝出來的數(shù)據(jù)也會跟著變化雹舀。
1芦劣、定義getters：
const store = new Vuex.Store({
getters: {
}
})
2、getters的兩種使用方式(和state的兩種使用方式相同)：
① this.$store.getters.方法名
在store.js中定義方法
const store = new Vuex.Store({
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
]
},
getters:{
handleProducts: (state)=>{
var handleProducts = state.products.map(
(products)=>{
return{
name:'@'+products.name+'',
price:products.price/2
}
}
)
return handleProducts
}
}
})
在組件計算屬性獲取到使用handleProducts()方法
<template>
<div>
<h2>product-list-two:</h2>
<ul>
//2.通過計算屬性使用數(shù)據(jù)
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "ProductListTwo",
computed:{
products(){
return this.$store.state.products
},
handleProducts(){
//1.獲取store.js中定義的數(shù)據(jù)處理方法
return this.$store.getters.handleProducts
}
}
}
</script>
或者也可以直接在html中使用
<template>
<div>
<h2>product-list-two:</h2>
<ul>
//在{{}}中直接通過this.$store.getters.handleProducts獲取到數(shù)據(jù)
<li v-for="product in this.$store.getters.handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
</div>
</template>
② 在組件中映射屬性為計算屬性
在store.js中定義方法handleProducts（）
const store = new Vuex.Store({
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
]
},
getters:{
handleProducts: (state)=>{
var handleProducts = state.products.map(
(products)=>{
return{
name:'@'+products.name+'',
price:products.price/2
}
}
)
return handleProducts
}
}
})
在組件中使用handleProducts()方法
<template>
<div>
<h2>product-list-one:</h2>
<ul>
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
</div>
</template>
<script>
// 1.從 vuex 中按需導(dǎo)入 mapState 函數(shù)
import {mapState, mapGetters} from 'vuex'
export default {
name: "ProductListOne",
// 2.將全局?jǐn)?shù)據(jù)说榆，映射為當(dāng)前組件的計算屬性
computed:{
...mapGetters(['handleProducts'])// 用...展開運算符把 handleProducts展開在資源屬性里
}
}
</script>
四肥缔、Mutations
????Mutations 用于變更 Store 中的數(shù)據(jù)莱没。嚴(yán)格模式下（strict:true），只有 mutation 里的函數(shù)才有權(quán)利去修改 state 中的數(shù)據(jù)。mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)承疲。但是府瞄，mutation只允許同步函數(shù)敷矫，不能寫異步的代碼础芍。
①嚴(yán)格模式下（strict:true），只能通過 mutation 變更 Store 數(shù)據(jù)神汹，不可以直接操作 Store 中的數(shù)據(jù)庆捺。
②通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監(jiān)控所有數(shù)據(jù)的變化屁魏。
1滔以、定義mutations：{}
const store = new Vuex.Store({
mutations: {
}
}
})
2、mutations的兩種觸發(fā)方式：(與state蚁堤、getters的兩種觸發(fā)方式一樣)
① this.$store.commit('事件名')
在store.js中定義事件declinePrice
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
strict:true,//嚴(yán)格模式下醉者，vuex里的數(shù)據(jù)組件只能通過commit觸發(fā)store里的mutations
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
],
},
mutations:{
//1、定義事件declinePrice
declinePrice: (state)=>{
state.products.forEach((product)=>{
product.price--
})
}
}
})
export default store
在vue組件中調(diào)用commit改變store中的數(shù)據(jù)
<template>
<div>
<h2>product-list-two:</h2>
<ul>
<li v-for="product in products">{{product.name}}--{{product.price}}</li>
</ul>
<button @click="declinePrice">decline</button>
</div>
</template>
<script>
export default {
name: "ProductListTwo",
computed:{
products(){
return this.$store.state.products
},
},
methods:{
declinePrice: function (){
//通過commit調(diào)用函數(shù)披诗，改變store的數(shù)據(jù)
this.$store.commit('declinePrice')
}
}
}
</script>
<style scoped>
</style>
*mutations傳遞參數(shù)
在組件中的代碼：
// 觸發(fā) mutation
methods: {
handleAdd () {
this.$store.commit('addN', 3)
}
}
打開 store/index.js 文件，增加一個 addN：
mutations: {
//形參step接收組件傳的參數(shù)3
addN (state, step) {
state.count += step
}
}
②從 vuex 中按需導(dǎo)入 mapMutations 函數(shù)
在store.js文件中定義declinePrice函數(shù)
const store = new Vuex.Store({
strict:true,//嚴(yán)格模式下立磁，vuex里的數(shù)據(jù)組件只能通過commit觸發(fā)store里的mutations
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
],
},
mutations:{
declinePrice: (state)=>{
state.products.forEach((product)=>{
product.price--
})
}
}
})
在組件中使用：
<template>
<div>
<h2>product-list-one:</h2>
<ul>
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
<button @click="declinePrice">decline</button>
</div>
</template>
<script>
//1.將指定的 mutations 函數(shù)呈队，映射為當(dāng)前組件的 methods 函數(shù)
import {mapGetters,mapMutations} from 'vuex'
export default {
name: "ProductListOne",
computed:{
products(){
return this.$store.state.products
},
},
methods:{
...mapMutations(['declinePrice'])用...展開運算符把declinePrice展開在methods里
}
}
五、Actions
Actions類似于mutations唱歧，不同在于：
- Actions提交的是mutations宪摧，而不是直接變更狀態(tài)
- Actions可以包含任意異步操作
1、定義actions
// 定義 Action
const store = new Vuex.Store({
actions: {
}
}
})
2颅崩、Actions的兩種觸發(fā)方式：
① this.$store.dispatch('方法名')
例子：目的-設(shè)置一個定時器几于，三秒后number自減
在store.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
strict:true,//嚴(yán)格模式下，vuex里的數(shù)據(jù)組件只能通過commit觸發(fā)store里的mutations
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
],
msg:'映射為計算屬性'
},
getters:{
handleProducts: (state)=>{
var handleProducts = state.products.map(
(products)=>{
return{
name:'@'+products.name+'',
price:products.price/2
}
}
)
return handleProducts
}
},
mutations:{
declinePrice: (state)=>{
state.products.forEach((product)=>{
product.price--
})
}
},
actions:{
//1.定義一個屬性declinePrice沿后，
//context相當(dāng)與this.$store
declinePrice:(context)=>{
//2.定時器三秒后觸發(fā)mutations里面的declinePrice屬性
setTimeout(()=>{
context.commit('declinePrice')
},3000)
}
}
})
export default store
在vue組件中
<template>
<div>
<h2>product-list-one:</h2>
<ul>
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
<button @click="declinePrice">decline</button>
</div>
</template>
<script>
// 1.從 vuex 中按需導(dǎo)入 mapState 函數(shù)
import {mapGetters,mapMutations} from 'vuex'
export default {
name: "ProductListOne",
computed:{
products(){
return this.$store.state.products
},
// 2.將全局?jǐn)?shù)據(jù)沿彭，映射為當(dāng)前組件的計算屬性
...mapGetters(['handleProducts'])
},
methods:{
//3.onclick事件，通過this.$store.dispatch('declinePrice')去觸發(fā)store.js中的actions
declinePrice: function(){
this.$store.dispatch('declinePrice')
}
}
}
</script>
<style scoped>
</style>
②從 vuex 中按需導(dǎo)入 mapActions 函數(shù)
使用方法和state尖滚、getters喉刘、mutations相同
六瞧柔、module
????由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象睦裳。當(dāng)應(yīng)用變得非常復(fù)雜時造锅，store 對象就有可能變得相當(dāng)臃腫。
????為了解決以上問題廉邑，Vuex 允許我們將 store 分割成模塊（module）哥蔚。每個模塊擁有自己的 state、mutation蛛蒙、action肺素、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：
