vuex4的簡單使用

安裝vuex

cnpm install vuex@next --save   
官網位址是 https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store      

vuex中的常用5個子產品

vuex子產品常見有這幾個 
1.state 存放資料的
2.getters 相當于計算屬性
3.mutations 改變state的值（同步）, 在頁面中通過store.commit('updateMenus',  '值') 觸發 mutations中的方法。進而更改state中的資料
4.actions 異步操作，在頁面中通過 store.dispatch('setTestName')來觸發actions 中的方法。在actions中通過 commit('updateTestName', '我是張三')來修改state 中的值
5.modules 子產品，内容較多的時候，可以進行子產品的拆分
ps：改變state中的資料，無論是同步還是異步。隻能夠通過mutations 中的方法去更改。不可以直接通過srore.state這樣的方式去更改。
      

簡單使用vuex store/index.ts檔案

在src下建立store文夾，在store文夾下建立index.ts.
import { createStore } from 'vuex'

const store = createStore({
    state() { 
        return {
            // 通過存在localStorage中避免重新整理的時候資料丢失
            menus: localStorage.getItem('menus') ? localStorage.getItem('menu') : [],
            testName: localStorage.getItem('testName') ? localStorage.getItem('testName') : '',
        }
    },
    getters: {
        // 計算屬性
        get_testName(state) { 
            return state.testName
        }
    },
    mutations: {
        updateMenus(state, menu) { 
            // @ts-ignore
            localStorage.setItem('menus',JSON.stringify(menu))
            state.menus=menu
        },
        updateTestName(state, testName) {
            // @ts-ignore
            localStorage.setItem('testName',testName)
            state.testName=testName
        }
    },
    actions: {
        // 調用
        setTestName({ commit }) {
            return new Promise((resolve, reject) => { 
                // 模拟的一個請求，通過commit觸發mutations中的 updateMenus
                setTimeout(() => {
                    commit('updateTestName', '我是張三')  
                    // 成功resolve傳回資料
                    resolve('我是張三')
                }, 1000);
            })
        }
    },
    modules:{}
})

export default store      

在main.ts中注冊

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { initRouter } from './router/index'
import store from './store/index' //新增
let  app=createApp(App)
initRouter(app)  
app.mount('#app') 
app.use(store)  //新增      

3種擷取值的形式

<template>
    <div>
        背景首頁
        <p>第1種:方式擷取store.state點的形式:姓名-{{ shwoName1 }}</p>

        <p>第2種:getters也沒有跟新:姓名-{{ shwoName2 }}</p>

        <p>第3種:computed跟新:姓名-{{ shwoName3 }}</p>

        <el-button @click="handler">跟新了值</el-button>
    </div>
</template>

<script setup lang="ts">
import { computed } from '@vue/runtime-core'
import { useStore } from 'vuex'
let store = useStore()
// 第1種:store.state點的形式
let shwoName1 = store.state.testName

// 第2種:getters也沒有跟新
let shwoName2 = store.getters.get_testName

// 第3種:computed跟新
let shwoName3 = computed(() => { 
    // return store.state.testName 或者如下
    return store.getters.get_testName
})

const handler = () => { 
    store.dispatch('setTestName').then(res => { 
        console.log('傳回來的值',res)
    })
}
</script>      

我推薦第三種方式computed去擷取值

因為前面這兩種隻會執行一次。如果設定testName的值是一個異步操作。
肯定就擷取不到最新的值了。      

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。