学习vue3之路 day6

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」

学习vue3之路

Vuex

Vuex是一个状态管理器，用于多个组件共享状态

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

状态管理有5个核心：state、getter、mutation、action、module。

State 状态

• 不可直接对 state 进行更改，需要通过 Mutation 方法来更改。
• 通过计算属性绑定状态

import store from '@/store/index.js';//需要引入store
computed: {
  count () {
    return store.state.count
  }
}

挂载全局变量store

// 页面路径：main.js 
import App from './App'
import store from './store'
import {createSSRApp} from 'vue'
export function createApp() {
    const app = createSSRApp(App)
    app.use(store)
    return {
        app
    }
}

mapState 映射状态

mapState 辅助函数 帮助我们生成计算属性

computed: {
  //使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    username: state => state.username,
    age: state => state.age,
  })
},

Getter 获取数据的函数

store中state数据的计算函数。

mapGetters

同mapState 映射getter方法

Mutation 改变数据

Vuex中store数据改变的唯一方法就是mutation

mutation 接受 state 作为第一个参数

import { createStore } from 'vuex'
const store = createStore({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            // 变更状态
            state.count += 2
        }
    }
})
export default store

调用mutation

store.commit

import store from '@/store/index.js'    
export default {
    computed: {
        count() {
            return this.$store.state.count
        }
    },
    methods: {
        addCount() {
            store.commit('add')
        }
    }
}

传入参数 payload

// 定义
const store = createStore({
    state: {
        count: 1
    },
    mutations: {
        add(state, payload) {
            state.count += payload.amount
        }
    }
})

// 调用
methods: {
  addCount () {//把载荷和type分开提交
    store.commit('add', { amount: 10 })
  }
}
​
// 使用对象方式调用
methods: {
  addCount() {//整个对象都作为载荷传给 mutation 函数
    store.commit({
      type: 'add',
      amount: 6
    })
  }
}

mapMutations 映射事件函数

• 最好提前在你的 store 中初始化好所有所需属性。
• Mutation 必须是同步函数

Action

• action类似mutations，action通过mutations改变state
• action 可以包含任意异步操作。

action 函数接受一个与 store 实例具有相同方法和属性的 context 对象

const store = createStore({
    state: {
        count: 1
    },
    mutations:{
        add(state) {
            // 变更状态
            state.count += 2
        }
    },
    actions:{
        addCountAction (context) {
            context.commit('add')
        }
    }
})

actions: {
  //参数解构
  addCountAction ({commit}) {
    commit('add')
  }
}

组件中调用action

// 调用action
store.dispatch('addCountAction')
​
// payload参数
store.dispatch('addCountAction', {amount: 10})
​
// 对象方式
store.dispatch({
  type: 'addCountAction',
  amount: 5
})

mapActions 辅助函数

Module 模块

Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter,最终组合成一个store.

store/index.js

import {createStore} from 'vuex'
import moduleA from '@/store/modules/moduleA'
import moduleB from '@/store/modules/moduleB'
export default createStore({
    modules: {
        moduleA,
        moduleB
    }
})

通过vuex管理组件的状态，在任意组件可以通过事件mutation、action的方式改变组件状态。

\