為了能在所有的頁面都實現狀態管理，我們按照前面講的頁面進行狀態獲取，然后再進行頁面設置和布局，那就是重復工作，vuex 就會解決這樣的問題，如同類、高度提煉的接口來幫助我們實現這些重復工作的管理。避免一直在造一樣的輪子。

https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E2%80%9C%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%E2%80%9D%EF%BC%9F

上面是vuex的官網。

其實以后用vuex 比較少? 但是vue2 上還是用的多，以后vue3或者4 都是用的Pinia

這樣的方案到處都是。

vuex 一般項目中用的就是module? 其他的模塊都是很少單獨使用的。

uniapp中是內置了vue下的。不需要再一次安裝，只需要構建一下就好了。

vue2中如果沒有安裝，可以手動裝，

安裝 | Vuex

這里要用的有? 頁面動物模塊狀態，購物車的狀態都要用到這樣的狀態數據。像購物車不可能需要用到購物車的數據的地方都去讀取數據庫，那樣會很麻煩，加大數據庫的訪問量。而且也慢。

1、建立一個文件夾在項目中? store

2、建立一個文件 index.js?? 在store--->index.js

3、在index.js? 導入vuex，?? import Vue from "vue"

具體如下：

//1、按照模塊進行開發?? 不需要每一頁面都定義? 所以前面開發的shop-headebar.vue? 是一個小小的demo? 這里還是要用到vuex的概念
//1.1 你改了vuex 中的值 就改變了所有的值? 想想都覺得舒坦? 如：購物車中數量變化 ，訂單，支付賬單， 購物頁面都一起變化； 頁面狀態值的使用也可以用vuex 用到整體 避免每一頁都改變
// 2、項目建立store文件夾
// 3、創建 index。js 在 store文件夾
// 4、index中 按照如下方式寫
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)?? //再vue安裝vuex

// 5、index中 實例化 vuex
//基本上包含這5個對象
const store = new Vuex.Store({
??? state:{
??????? //定義變量? 一般這些后面就直接放大modules的js文件中定義，index進行導入就好
??????? vuexValue1:22,? //這里的值，相當于data，每一個頁面都可以用
??????? vuexValue2:232,? //這里的值，相當于data，每一個頁面都可以用
??????? vuexName:"開開心心",? //這里的值，相當于data，每一個頁面都可以用
??? },
?? ?
??? getters:{
?????? ?
??? },
??? mutations:{
??????? //定義動作 state 是上面定義的變量?? num 是傳進來的值
??????? setVuexValue(state,num){
??????????? state.vuexValue1 =num
??????? }
??? },
??? actions:{
?????? ?
??? },
??? modules:{
?????? ?
??? }
})

export default store?
// 6、 index中 要 把它導出去，方便引入的頁面可以用上面的定義的值和方法

//7、當然這里還需要將其導入到main.jS中? ，全局導出使用，main.JS如下方式：
/*
import store from '@/store'
//這樣就可以對該store進行全局掛載 使用
Vue.prototype.$store=store
*/

// 8、然后再需要用的頁面 導入 按照如下方式? import
// 9、在進行計算? 把需要的值計算過來
/*
<template>
??? <view>
??????? 個人中心
??????? {{vuexValue1}} {{vuexName}} ?
??????? <button @click="clkbtn">修改</button>

//這里的變化，就會改變其他使用這個vuexValue1 的值，使用vuex 就是這樣的一個好處，一個大腦，多處使用。
??? </view>
</template>

<script>
??? import {mapState,mapMutations} from "vuex"
??? export default {
??????? data() {
??????????? return {
?????????????? ?
??????????? };
??????? },
??????? computed:{
??????????? ...mapState(["vuexValue1","vuexName"])
??????? },
??????? methods:{
??????????? ...mapMutations(["setVuexValue"]),
??????????? clkbtn(){

??????????????? //this.vuexValue1=55?? 不能這樣

??????????????? //這里的修改不能用 直接修改需要調用vuex中的方法：如下
??????????????? this.setVuexValue(55)??? //默認就把state導過來了 相當于類? 不用寫變量
??????????? }
??????? }
??? }
</script>

<style lang="scss">

</style>

??? */
? ?
?? // 10.如果其他組件需要用，也要按照 8、9的方法來導入
? ?
?? // 11 如果后面要改變這里的state 需要使用mutations?? ，然后在要用的頁面的方法中導入
?? /*
?? methods:{
?????? ...mapMutations(["setVuexValue"]),
?????? clkbtn(){
?????????? this.setVuexValue(55)
?????? }
??? */
??

//1、按照模塊進行開發   不需要每一頁面都定義  所以前面開發的shop-headebar.vue  是一個小小的demo  這里還是要用到vuex的概念
//1.1 你改了vuex 中的值 就改變了所有的值  想想都覺得舒坦  如：購物車中數量變化 ，訂單，支付賬單， 購物頁面都一起變化； 頁面狀態值的使用也可以用vuex 用到整體 避免每一頁都改變
// 2、項目建立store文件夾
// 3、創建 index。js 在 store文件夾
// 4、按照如下方式寫
import Vue from "vue"
import Vuex from "vuex"Vue.use(Vuex)   //再vue安裝vuex// 5、實例化 vuex
//基本上包含這5個對象 
const store = new Vuex.Store({state:{//定義變量  一般這些后面就直接放大modules的js文件中定義，index進行導入就好vuexValue1:22,  //這里的值，相當于data，每一個頁面都可以用vuexValue2:232,  //這里的值，相當于data，每一個頁面都可以用vuexName:"開開心心",  //這里的值，相當于data，每一個頁面都可以用},getters:{},mutations:{//定義動作 state 是上面定義的變量   num 是傳進來的值setVuexValue(state,num){state.vuexValue1 =num}},actions:{},modules:{}
})export default store  
// 6、 把它到出去，方便引入的頁面可以用上面的定義的值和方法
//7、當然這里還需要將其導入到main.jS中  如下方式：
/*
import store from '@/store'
//這樣就可以對該store進行全局掛載 使用
Vue.prototype.$store=store
*/// 8、然后再需要用的頁面 導入 按照如下方式  import 
// 9、在進行計算  把需要的值計算過來
/*
<template><view>個人中心{{vuexValue1}} {{vuexName}}  <button @click="clkbtn">修改</button></view>
</template><script>import {mapState,mapMutations} from "vuex"export default {data() {return {};},computed:{...mapState(["vuexValue1","vuexName"])},methods:{...mapMutations(["setVuexValue"]),clkbtn(){this.setVuexValue(55)}}}
</script><style lang="scss"></style>*/// 10.組件需要用，也要按照 8、9的方法來導入// 11 如果后面要改變這里的state 需要使用mutations   ，然后在要用的頁面的方法中導入/*methods:{...mapMutations(["setVuexValue"]),clkbtn(){this.setVuexValue(55)}*/

注：------------------------------------

如果我們再兩個地方用一個值，那么這里就可以實現一個地方變化，其他地方跟到變化。

很好的例子就是購物車，在多個地方都需要變化

另外：

安裝 | Vuex

1、state 模塊 就是一個 數據模塊? 相當于 vue中script的?? data?

2、getter 就是一個實現計算屬性? 相當于vue中script的? computed ? 如：求和等

3、mutation 就是方法，相當于vue中script的? 方法：methods，它可以修改data中的值，這里就是修改state中的值；

4、action 是一個異步的方法

5、module 是最終的使用方式