uniapp中使用vuex

本文介绍了在uniapp中如何使用Vuex进行状态管理。首先在main.js中注册Vuex,然后创建store文件夹及index.js,定义state、getters、mutations,并在页面中通过mapGetters、mapMethods等辅助函数来访问和修改状态。示例代码展示了如何在组件中获取和操作数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在main.js中注册

// vue2的vuex
// #ifdef VUE3
import store from './store/index.js'
import {
  createSSRApp
} from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  return {
    app
  }
}
// #endif

创建一个store的文件夹  创建 index.js的store文件

// 页面路径:store/index.js
import {
  createStore
} from 'vuex'


const store = createStore({
  state: { //存放状态
    "username": "foo",
    "age": 18,
    "cart": ['迪丽热巴'],
    todos: [{
        id: 1,
        text: '我是内容一',
        done: true
      },
      {
        id: 2,
        text: '我是内容二',
        done: true
      }
    ],
    count: 1
  },
  // 计算属性
  getters: {
    // 过滤掉false  留下done为true的项
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    // 得到true的长度  1
    doneTodosCount: (state, getters) => {
      //state :可以访问数据
      //getters:访问其他函数,等同于 store.getters
      return getters.doneTodos.length
    },
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  },
  // 方法  Vuex中store数据改变的唯一方法就是mutation
  mutations: {
    add(state, step) {
      // 变更状态
      state.count += step
    },
    // add(state, payload) {
    //   // 变更状态
    //   state.count += payload.amount
    // },
    addToCart(state, goods) {
      // 根据提交的商品的Id,查询购物车中是否存在这件商品
      // 如果不存在,则 findResult 为 undefined;否则,为查找到的商品信息对象
      const findResult = state.cart.find((x) => x.goods_id === goods.goods_id)

      if (!findResult) {
        // 如果购物车中没有这件商品,则直接 push
        state.cart.push(goods)
      } else {
        // 如果购物车中有这件商品,则只更新数量即可
        findResult.goods_count++
      }
    }
  }
})
// 导出这个实例
export default store

在页面中使用

<!-- view 视图-->
<template>
  <view>
    <view v-for="(item,index) in doneTodos" style="border: 1px solid red;">
      <view>{{item.id}}</view>
      <view>{{item.text}}</view>
      <view>{{item.done}}</view>
    </view>
    我是长度 {{doneTodosCount}}
    <button @click="increment(10)"> dwa</button>

    <view>
      <view>数量:{{count}}</view>
      <button @click="addCount">增加</button>
    </view>
  </view>
</template>
<script>
  import store from '@/store/index.js'
  // 计算属性
  import {
    mapGetters
  } from 'vuex' //引入mapGetters
  // 数据
  import {
    mapState
  } from 'vuex' //引入mapState
  // 方法
  import {
    mapMutations
  } from 'vuex' //引入mapMutations
  export default {
    // state 数据源
    data() {
      return {
        count: 0
      }
    },
    // actions 控制状态变化
    methods: {
      increment(num) {
        this.count += num
      }
    },
    computed: {
      // 使用对象的展开运算符 将getter混入computed对象中
      ...mapGetters([
        'doneTodos',
        'doneTodosCount',
      ]),
      count() {
        return this.$store.state.count
      }

    },
    methods: {
      // 调用store中的方法  得到commit
      addCount() {
        store.commit('add', 85)
        // store.commit('add', {
        //   amount: 10
        // })
        // store.commit({
        //   // type是调用的方法名称
        //   type: 'add',
        //   // 传递的参数
        //   amount: 100
        // })
      },
      // ...mapMutations(['add', 50]) //对象展开运算符 直接拿到add方法
    }
  }
</script>
<style lang="scss">

</style>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fameless

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值