Vue3使用 vuex 的写法

• 打开store中的index.js 代码如下

import {
  createStore
} from 'vuex'

export default createStore({
  state: {
    name: "愣头青",
    age: 18,
  },
  getters: {
    changeAge(state) {
      return state.age + '岁'
    }
  },
  mutations: {
    changeName(state, value) {
      state.name = value
    },
    changeProducts(state, value = []) {
      state.products = value
    }
  },
  actions: {
    getProducts({
      commit
    }) {
      setTimeout(() => {
        commit('changeProducts', [{
          name: '这是一个商品'
        }])
      }, 1000)
    }
  },
  modules: {},
  plugins: []
})
// vuex 属性解析 和vue2 的 vuex 一样
/**
 * state      用来写要存储的状态（数据）
 * getters    相当于vue中的计算属性
 * mutations  修改state数据的唯一方法就是提交mutation
 * actions    异步处理数据的方法 通过提交mutation修改数据 不建议直接修改 这里直接修改也可以 但是当前情况下框架不完善 所以不建议直接修改
 * modules    模块化方法
 * plugins    插件使用的位置
 **/

vue中

<template>
  <div class="home">
    {{name}} - {{age}}

    <button @click="changeName('杜甫')">修改名字</button>
    <button @click="getProducts">点击获取商品数据</button>
    <ul>
      <li v-for="(item, i) in products" :key="i">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
// defineComponent 定义一个组件的方法 返回值是传递给函数的对象 也可以接收一个函数作为参数
// computed 计算属性 返回一个ref类型的数据 ref是vue3用来声明具有相应式的基本数据类型的方法
import { defineComponent, computed } from 'vue'
// useStore 可以将store中的数据和方法获取到的方法
import { useStore } from 'vuex';
export default defineComponent({
  // vue3的组合api 运行在beforeCreate之前 为了方式this使用错误 setup中直接将this的值设置成了undefined 所以在setup中没有this
  setup() {
  	// vuex
    let store = useStore()
    // console.log(store.state);
    // 在setup中定义的方法和数据如果需要在页面中使用 则需要先将数据或者方法返回
    return {
      name: computed(() => store.state.name),
      age: computed(() => store.getters.changeAge),
      changeName: (name) => store.commit('changeName', name), // 使用mutation方法的函数
      getProducts: () => store.dispatch('getProducts'), // 调用actions函数的方法
      products: computed(() => store.state.products)
    }
  }
})
</script>