uniapp中使用vuex

在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>