首页 > 其他分享> 文章详细

vuex 如何使用

2022-08-03 17:33:51 阅读：188 来源： 互联网

标签：product 如何 state 使用 import vuex id types

vuex如何使用

以下实现一个通过vuex来存储购物车商品信息的小demo
"vue": "^3.2.13",
"vuex": "^4.0.2"

vuex准备工作

下载vuex npm i vuex --save
在src下创建文件夹store
创建如下文件：

代码部分

index.js

引入所有vuex相关文件，vue3 和vue2有些不一样

    import Vuex from "vuex";
    import state from "./state";
    import mutations from "./mutations";
    import * as actions from "./actions";
    import * as getters from "./getters";
  
    export default new Vuex.Store({
      state,
      getters,
      actions,
      mutations,
    });

state.js

存放需要使用 vuex store的数据

    const state = {
      // 购物车列表
      shopList: [],
    };
    export default state;

mutations.js

修改state里面数据的唯一途径

    import * as types from "./mutation-types";

    const mutations = {
      // 添加到购物车
      [types.PUSH_TO_CART](state, product) {
        state.shopList.push({
          id: product.id,
          name: product.name,
          price: product.price,
          number: 1,
        });
      },
      // 添加数量
      [types.ADD_NUMBER](state, product) {
        const cartItem = state.shopList.find((item) => item.id === product.id);
        cartItem.number++;
      },
      // 移除购物车中的商品
      [types.REMOVE_PRODUCT](state, product) {
        state.shopList = state.shopList.filter((item) => item.id !== product.id);
      },
    };
    export default mutations;

mutation-types.js

存放mutations内方法的别名，便于统一管理

    // 添加到购物车
    export const PUSH_TO_CART = "PUSH_TO_CART";
    // 增加商品数量
    export const ADD_NUMBER = "ADD_NUMBER";
    // 移除购物车中的商品
    export const REMOVE_PRODUCT = "REMOVE_PRODUCT"

getters.js

state的计算属性，用于获取store内数据

    export const shopList = function (state) {
      return state.shopList;
    };

actions.js

用于操作mutations，可写一些简单的业务逻辑

    import * as types from "./mutation-types";

    /** 添加商品到购物车 */ 
    export const addProductToCart = function ({ commit, state }, product) {
      const cartItem = state.shopList.find((item) => item.id === product.id);
      if (cartItem) {
        commit(types.ADD_NUMBER, { id: product.id });
      } else {
        commit(types.PUSH_TO_CART, product);
      }
    };

main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    import store from "./store/index"

    createApp(App).use(store).mount('#app')

标签：product,如何,state,使用,import,vuex,id,types
来源： https://www.cnblogs.com/drollboy/p/16547943.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9