文章目錄
- 1.概念
- 2.何時使用？
- 3.搭建vuex環境
- 3.1 建立檔案:`src/store/index.js`
- 3.2 在`main.js`中建立vm時傳入`store`配置項
- 4.基本使用
- 4.1、初始化資料、配置`actions`、配置`mutations`，操作檔案`store.js`
- 4.2、元件中讀取vuex中的資料：```$store.state.sum```
- 4.3、 元件中修改vuex中的資料
- 5、實際應用
- 5.1 項目結構
- 5.2 store/index.js
- 5.3 components/Count.vue
- 5.4 App.vue
- 5.6 main.js
- 6、實戰測試效果
- 6.1 視訊效果
- 6.2 原理圖解（代碼走向）
- 6.3 提示注意
輔助了解vuex的工作原理：好比一個客戶（VueComponents）去飯店吃飯，客人首先和服務員(Actions)對接，然後服務員再将客戶的需求講述給廚房的廚師（Mutations）。存在一種情況、客戶和廚師很熟、廚師也知道客戶的口味。則可以直接跳過服務員直接對話。另外一種情況，服務員可以處理一些特殊的情況，比如客戶點的菜一起吃可能會造成不良的影響，這個時候服務員的作用就出來了。也就是說Actions 可以處理一些業務邏輯，調用接口，發送ajax請求。
1.概念
在Vue中實作集中式狀态（資料）管理的一個Vue插件，對vue應用中多個元件的共享狀态進行集中式的管理（讀/寫），也是一種元件間通信的方式，且适用于任意元件間通信。
2.何時使用？
多個元件需要共享資料時
3.搭建vuex環境
安裝vuex：
npm i vuex
，要安裝對應的版本
安裝可能出現的問題
3.1 建立檔案:src/store/index.js
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex插件
Vue.use(Vuex)
//準備actions對象——響應元件中使用者的動作
const actions = {}
//準備mutations對象——修改state中的資料
const mutations = {}
//準備state對象——儲存具體的資料
const state = {}
//建立并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
//第二種形式
// //建立store
// const store = new Vuex.Store({
// actions,
// mutations,
// state,
// })
// //導出store
// export 3.2 在main.js中建立vm時傳入store配置項
import store from './store'
//建立vm
new Vue({
el:'#app',
render: h => h(App),
store
}) 4.基本使用
4.1、初始化資料、配置actions、配置mutations，操作檔案store.js
//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
//響應元件中加的動作
jia(context,value){
// console.log('actions中的jia被調用了',miniStore,value)
context.commit('JIA',value)
},
}
const mutations = {
//執行加
JIA(state,value){
// console.log('mutations中的JIA被調用了',state,value)
state.sum += value
}
}
//初始化資料
const state = {
sum:0
}
//建立并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
}) 4.2、元件中讀取vuex中的資料：$store.state.sum
4.3、 元件中修改vuex中的資料
：
$store.dispatch('action中的方法名',資料)
或
$store.commit('mutations中的方法名',資料)
備注：若沒有網絡請求或其他業務邏輯，元件中也可以越過actions，即不寫，直接編寫dispatch
commit
5、實際應用
描述：制作一個簡單的數字累加器，加法、減法、定時加、累加和為奇數加
目的：練習使用vuex、了解期工作的原理
5.1 項目結構
5.2 store/index.js
//該檔案用于建立Vuex中最為核心的store
//引入Vuex
import Vuex from 'vuex'
//引入Vue
import Vue from 'vue'
//使用插件
Vue.use(Vuex)
//準備action-- 用于響應元件中的動作
const actions = {
jia(context, value) {
console.error("Action中的", context, value)
context.commit('JIA', value)
},
jiaodd(context, value) {
if (context.state.sum % 2) {
console.error("jiaodd")
context.commit('JIA', value)
}
},
jiaWait(context, value) {
setTimeout(() => {
context.commit('JIA', value)
}, 500);
}
}
//準備mutations-- 用于操作資料（state)
const mutations = {
JIA(state, value) {
console.error("Mutations中的", state, value)
state.sum += value
},
JIAN(state, value) {
state.sum -= value
}
}
//準備state--用于存儲資料
const state = {
sum: 0 //目前的和
}
//第一種形式
//建立并且暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
//第二種形式
// //建立store
// const store = new Vuex.Store({
// actions,
// mutations,
// state,
// })
// //導出store
// export 5.3 components/Count.vue
<template>
<div>
<h1>目前求和為:{{ $store.state.sum }}</h1>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">目前求和為奇數再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
export default {
name: "Count",
data() {
return {
n: 1, //使用者選擇的數字
};
},
methods: {
increment() {
this.$store.dispatch("jia", this.n);
},
decrement() {
this.$store.commit("JIAN", this.n);
},
incrementOdd() {
this.$store.dispatch("jiaodd", this.n);
},
incrementWait() {
this.$store.dispatch('jiaWait',this.n)
},
},
};
</script>
<style lang="css">
button {
margin-left: 5px;
}
</style> 5.4 App.vue
<template>
<div>
<Count/>
</div>
</template>
<script>
import Count from './components/Count'
export default {
name:'App',
components:{Count},
}
</script> 5.6 main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入store
import store from './store/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App),
beforenCreate() {
Vue.prototype.$bus = this
}
}) 6、實戰測試效果
6.1 視訊效果
6.2 原理圖解（代碼走向）
6.3 提示注意
- 1、點選加号、純粹的進行加操作，可以直接跳過
dispatch
commit
- 2、點選減号、和加法類似
- 3、當累加和為奇數、可以繼續添加。這個時候就要在
Actions
commit
- 4、定時器也可以直接寫在
Actions