Vue3 vuex

十二月 15, 2020

vue3

vuex

vuex是vue项目的状态[数据]管理工具，用于获取、存储、操作数据

vuex构成部分

1. state 状态
2. actions 动作
3. mutations 动作的下一步，用于修改数据
4. getters 几乎不使用

流程

安装
1
yarn add vuex@next
在src目录下建立store文件夹再创建index.ts
注册store
src/main.ts中 use(store)
单独数据块
在store文件夹下创建
1. namespaced
2. state
3. actions
4. mutations
src/App.vue
1. 引入并实例化
2. 获得数据用计算属性，使用方法store.dispatch({type,data})

案例

store的入口文件

1 2	import { createStore } from 'vuex' import homeStore from './homeStore' // 接下来创建homeStore这个数据块

数据块

在store文件夹下创建homeStore.ts

const homeStore = {
    namespaced: true, // 是否使用命名空间，如果使用的话调用数据前加上仓库名
        // 例:   homeStore/getList
    state: { // 用于存放数据
        // 数据
        list: []
    },
    actions: { // 给组件提供方法调用
        // 例:
        async getList({commit},{val}){ 
            // commit为仓库里解构出来的方法，用于将action发送给mutations
            // val为前端组件store.dispatch({type,data})的data中解构出来的 
            // 内部书写逻辑
            const r = await api.abcdReq(); // 假设发个请求
            if(r) {
                commit({
                    type: 'GET_LIST', // type 书写常量，也是下面mutations中方法的调用名
                    payload: r.data // data随意书写的，主要将r接收来的数据放在负载的payload中
                })
            }
        }
    }，
    mutations: {
        GET_LIST(state, { payload }) { 
            // state 为该仓库中的state数据
            // { payload }为上面actions中传递下来的payload并解构
            state.list = payload // 将仓库数据的list修改为payload负载中的值

        }
    },
};

export default homeStore;

App.vue

import { useStore } from 'vuex' // 引入
const store = useStore()  // 实例化
const list = computed(()=>store.state.homeStore.list) // 计算属性获取方法
onMounted(()=>{
    store.dispatch({
        type: 'homeStore/getlist', // 如果没用命名空间则不需要homeStore 但不利于管理
        val: 'asda' // val可以取名
    })
})

return {
    //.... 记得return 如果用了script标签setup语法糖则不需要
}

查看评论

1. vuex