vue（八）状态管理vuex

安装和使用

Vuex是一个专门为vue.js应用程序开发的状态管理模式 + 库，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据。

1、安装 npm install --save vuex

2、配置Vuex文件 store/index.js

import {createStore} from "vuex"

export default createStore({
// 所有状态（数据）都存储在state中，这里设置一个初始状态
    state:{
        num:1
    }
})

3、在main.js中引入

import store from './store'

const app= createApp(App)
app.use(store)

4、在所有组件中使用：可以使用 $ 或 mapState 读取

# 1、使用$读取数据
<h3>num= {{ $store.state.num }}</h3>

# 2、使用mapState读取
  <h3>num={{ num }}</h3>

<script>
# 导入mapState
import {mapState} from 'vuex'

export default {
    name: "App",
    computed:{
      ...mapState(["num"]) // 使用mapState获取num
    }
}

状态管理核心

常用的核心概念包含 State, Getter, Mutation, Action

• Getter 对Vuex的数据进行过滤

# 设置 getters 
import {createStore} from "vuex"

export default createStore({
    state:{
        num:1
    },
    getters:{
        getNum(state){
            return state.num>1?state.num : 2
        }
    }
})

# 使用getters获取数据
  <h3>num=={{ getNum }}</h3>

import {mapGetters} from 'vuex'
export default {
    name: "App",
    computed:{
      ...mapGetters(["getNum"])
    }
}

• Mutation 对Vuex的数据进行修改，只支持同步操作，每个Mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是我们实际进行状态更改的地方，它接收state作为第一个参数

# 设置Mutation
export default createStore({
    state:{
        num:1
    },
    getters:{
        getNum(state){
            return state.num
        }
    },
    mutations:{
        setNum(state,n){ //n作为可传参数
            state.num=state.num+n
        }
    }
})

# 使用Mutation设置数据。通过事件来设置数据
  <h3>num=={{ getNum }}</h3>
  <button @click="addNumHandler">add</button>

import {mapGetters,mapMutations} from 'vuex'

export default {
    name: "App",
    computed:{
      ...mapGetters(["getNum"])
    },
    methods:{
      ...mapMutations(["setNum"]),
      addNumHandler(){
        this.setNum(5)
      }
    }
    
}

• Action 类似Mutation，不同在于

• Action提交的是Mutation，而不是直接变更状态

• Action可以包含任意异步操作，网络请求就可以放这里

# 设置Action
import {createStore} from "vuex"
import axios from "axios"

export default createStore({
    state:{
        num:1
    },
    getters:{
        getNum(state){
            return state.num
        }
    },
    mutations:{
        setNum(state,n){
            state.num=state.num+n
        }
    },
    actions:{
        asyncAddNum({commit}){
            axios.get("http://xxx/x").then
            (res=>{
                    commit("setNum",res.data)    //调用 Mutation 设置数据
                })
        }
    }
})
# 使用Action设置数据
  <h3>num=={{ getNum }}</h3>
  <button @click="addNumHandler">add</button>

import {mapGetters,mapMutations,mapActions} from 'vuex'

export default {
    name: "App",
    computed:{
      ...mapGetters(["getNum"])
    },
    methods:{
      ...mapMutations(["setNum"]),
      ...mapActions(["asyncAddNum"]),
      // 事件回调函数调用 actions 设置的请求
      addNumHandler(){
        this.asyncAddNum();
      }
    }
    
}