vuex的简单使用

最新推荐文章于 2025-10-12 18:05:30 发布

原创最新推荐文章于 2025-10-12 18:05:30 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

技术（javascript）专栏收录该内容

114 篇文章

订阅专栏

本文介绍了一个使用Vue和Vuex进行状态管理的具体案例。详细展示了如何通过定义state、getters、mutations和actions来组织和操作数据，实现组件间的数据共享，并通过具体的Vue组件示例说明了如何使用这些功能。

使用了 vue-lic脚手架（我不说得很理论，我就说得很通俗）

在store文件下面写成（index.js是加载全部）

下面是 modules文件下的wallet.js代码

export default {
    state: {
        projects: []
    },
    getters: {
        saleProducts: (state) => {     // 这边是查询出来（vue文件那边是访问这个的）
            console.log(state.projects)
            return state.projects
        }
    },
    mutations: {
        reducePrice: (state, src) => {  // 这边把获取到的数据进行赋值
            state.projects = src
        }
    },
    actions: {
        saveForm: ({commit}, src) => {    
// 获取VUE那边接口的数据，然后提交到mutations里面的reducePrice
                commit('reducePrice', src)
    } 
  }

这是index.js

import Vue from 'vue'
import Vuex from 'vuex'
import wallet from './modules/wallet' // 钱包

Vue.use(Vuex)

export default new Vuex.Store({
    strict: true,
    modules: {
        wallet
    }
})

vue 这块使用（只能截图大概出来）

html

<div class="list-li-balancepay" v-for="(list, index) in saleProducts" @click="jumpDetails(list.id)">
        <div class="list-li-left">
            <strong>{{list.title}}</strong><br />
            <span style="color:#aaa;font-size:12px;">{{list.created_at}}</span>
        </div>
        <div class="list-li-right">
            <strong>{{list.change_amount}}</strong>
        </div>
    </div>
</div>

export default {
        created() {
            this.request()
            console.log(1)
        },
        mounted: function() {
            console.log(2)
        },
        activated: function() {
            console.log(3)
        },
        deactivated: function() {
            console.log(4)
        },
        methods: {
            request() {
//                console.log(this.$store.getters.saleProducts)
//                console.log(this.$store.dispatch('saveForm', this.$store.state.user))
                    this.loading = true
                    this.$http.post('xxxxxxxxxxxxxxxxxxxxxxxxx', {},
                        (res) => {
                            if (is.object(res)) { 
                                if (res.status === 'succ') {  
                                   // actions里面的saceForm方法 传接口数据过去(那边接受赋值)
                                    this.$store.dispatch('saveForm', res.data.list)
                                } else {
                                    this.$router.push({path: '/login'})
                                }
                            } else {
                                this.$toast.show('加载失败')
                            }
                        }, (data) => {
                            this.$toast.show('请求数据失败')
                        })
                }   
            }
        },
        computed: {
            wallet() {
                return this.$store.state.projects // 这个是直接查询 state里面的projects这样为空
            },            
           saleProducts() { 
               return this.$store.getters.saleProducts // 这个是查询getters 得到接口的数据
           }