Vue3 中使用Vuex

骑猪看日落 2022-09-11 10:13 239阅读 0赞

[vue3.x使用vuex\_small streamed bun-CSDN博客\_vue3 vuex][vue3.x_vuex_small streamed bun-CSDN_vue3 vuex]

[Vue3.0 Vuex - 简书][Vue3.0 Vuex -]

**第一种：store/index.js 直接写**

import { createStore } from 'vuex'
    
    export default createStore({
      state: {
        name:"du"
      },
      mutations: {
      },
      actions: {
      },
      modules: {
      }
    })
    
    //读取
    
    store.state.name //du

**第二种分离modules  一般项目使用第二种**

collection.js

export default {
        state: () => ({
            collects: ['1', '2'],
        }),
        getters: {
            renderCollects(state) {
                return state.collects
            }
        },
        mutations: {
            pushCollects(state, params) {
                state.collects.push(params)
            }
        },
        actions: {
            invokePushItems(context, params) {
                context.commit("pushCollects", params)
            },
        },
    
    }
    
    //读取
    
    store.state.collection.collects

引入：

import { createStore } from 'vuex'
    import collection from './collection'
    export default createStore({
      modules: {
        collection
      }
    })

** 第三种:**

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。  
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
      state: () => ({ job:"cxy" }),
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    const moduleB = {
      state: () => ({ ... }),
      mutations: { ... },
      actions: { ... }
    }
    const store = createStore({
      modules: {
        moduleA,
        moduleB,
      }
    })
    
    //读取
    store.state.moduleA.job

使用

import { reactive } from 'vue'
    import { useStore } from 'vuex'
    export default {
        setup(){
            let store = useStore()
            let data = reactive({
            	count: 0
            })
            onMounted(() => {
                store.dispatch('addCount')
            })
            let add = () => {
                store.dispatch('addCount')
                data.count = data.count = store.getters.getCount
            }
            return{
            	data,
                add
            }
        }
    }

[vue3.x_vuex_small streamed bun-CSDN_vue3 vuex]: https://blog.csdn.net/qq_43158069/article/details/112529764
[Vue3.0 Vuex -]: https://www.jianshu.com/p/1b20977598ff