一、基本用法
- 1.建立項目
vue create app_vuex
cd app_vuex
npm install
- 2 安裝vuex
npm install vuex --save-dev
- 3 在src目錄下建立一個store目錄 在裡面建立一個 index.js ，并在main.js檔案中進行配置
index.js中寫入
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
main.js中寫入
import Vue from 'vue'
import App from './App.vue'
import store from './store/index' // 配置store
Vue.config.productionTip = false
new Vue({
store,//配置 store 選項，指定為 store 對象，會自動将 store 對象注入到所有子元件中，在子元件中通過 this.$store 通路該 store 對象
render: h => h(App),
}).$mount('#app')
- 4 編輯index.js檔案
const store = new Vuex.Store({
state:{
count:9
}
})
export default store;
tip：使用vuex的時候，我們需要明白幾個概念，以及怎樣使用，使用的優點
1.6個概念： store（基本的概念，建立一個資料倉庫）；state （資料）；getters（功能類似計算屬性）；mutations；actions；modules
2.優點：使用vuex 當項目中的資料很多，并且在多個頁面使用，可以動态更改資料，多個頁面都會有變化。并且store裡面的資料不能直接修改
3.過程：
① Vue Components 是我們的 vue 元件，元件會觸發（dispatch）一些事件或動作，也就是 Actions；
② 我們在元件中發出的動作，肯定是想擷取或者改變資料的，但是在 vuex 中，資料是集中管理的，我們不能直接去更改資料，是以會把這個動作送出（Commit）到 Mutations 中；
③ 然後 Mutations 就去改變（Mutate）State 中的資料；
④ 當 State 中的資料被改變之後，就會重新渲染（Render）到 Vue Components 中去，元件展示更新後的資料，完成一個流程。
- 5.在app.vue檔案中引入
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<p>{{count}}</p>
</div>
</template>
<script>
export default {
name: 'app',
computed:{
count(){
return this.$store.state.count
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
當要實作一個簡單的購物車資料的增加和減少代碼如下：
index.js檔案添加一個mutations就可以
const store = new Vuex.Store({
state:{
count:9
},
mutations:{
add(state){
state.count++;
},
jian(state){
state.count--;
}
}
})
app.vue檔案中直接調用就可以了
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<p>{{count}}</p>
<div>
<button @click="add">+</button>
<button @click="jian">-</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
computed:{
count(){
return this.$store.state.count
}
},
methods:{
add(){
this.$store.commit('add')
},
jian(){
this.$store.commit('jian')
}
}
}
</script>
也可以通過mapState 控制多個資料，傳遞的時候可以作為一個數組的形式傳遞；
例如：在index.js檔案中，定義多個資料，在app.vue檔案中添加代碼
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<p>{{count}}{{num1}}{{num2}}</p>
<div>
<button @click="add">+</button>
<button @click="jian">-</button>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'app',
// computed:{
// count(){
// return this.$store.state.count
// }
// },
computed:mapState(['count' ,'num1' ,'num2']),
methods:{
add(){
this.$store.commit('add')
},
jian(){
this.$store.commit('jian')
}
}
}
</script>
二、也可以用vuex 提供的 mapGetters 和 mapActions 來通路
1. mapGetters 用來擷取屬性（資料）
app.vue檔案中引入 mapGetters
import {mapGetters } from 'vuex'
然後再計算屬性中調用mapGetters 的輔助方法，并傳入一個數組
computed:{
...mapGetters(['count' ,'num1' ,'num2'])
},
2.getters 用來擷取屬性
index.js檔案中寫入
getters:{
count(state){
return state.count
},
num1(state){
return state.num1
},
num2(state){
return state.num2
}
}
此時，頁面中的資料才會被傳過來
3.通過動作來改變資料
actions 定義方法（動作）,可以使異步的發送請求。
commit 送出變化，修改資料的唯一方式就是顯示的送出 mutations
mutations 定義變化，處理狀态（資料）的改變
index.js檔案中寫入
// // 定義 actions ，要執行的動作，如流程的判斷、異步請求
actions:{
add({commit}){
//送出一個名為 add 的變化，名字可自定義，可以認為是類型名，與下方 mutations 中的 add 對應
//commit 送出變化，修改資料的唯一方式就是顯式的送出 mutations
commit('add')
},
jian({commit}){
commit('jian')
}
}
app.vue中先引入mapActions
import {mapActions } from 'vuex'
然後再methods後面 調用mapActions輔助方法，傳入一個數組
methods:{
...mapActions(['add','jian'])
}
也可以直接用 this.$store.dispatch（"add"）;
如果需要對應的資料的時候，可以使用 this.$store.dispatch（"add",res.data.data）
參考文章連結：https://www.cnblogs.com/yaowen/p/8927343.html
https://www.jb51.net/article/123703.htm
![Vuex 安裝 建立目錄 和使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)