简单的vuex 的使用案例笔记

下面我将为你详细讲解“简单的vuex的使用案例笔记”的完整攻略。

一、什么是Vuex？

Vuex是Vue.js的官方状态管理工具，由于Vue.js是一款轻量级的前端框架，因此Vuex可以很好地解决多组件共享状态管理的问题，让我们可以更方便地管理组件之间的通信问题。

二、安装和配置Vuex

1.安装

你可以通过npm或者yarn安装Vuex：

npm install vuex --save
或者
yarn add vuex

2.使用

在Vue的入口文件中引入Vuex，并且将其挂载到Vue实例中。下面是一个完整的示例代码：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
      count: 0
  },
  mutations: {
      increment(state) {
          state.count++;
      },
      decrement(state) {
          state.count--;
      }
  },
  getters: {
      getCount(state) {
          return state.count;
      }
  }
});

new Vue({
  el: '#app',
  store,
  template: `
      <div>
          <p>当前计数为{{count}}</p>
          <button @click="increment">增加</button>
          <button @click="decrement">减少</button>
      </div>
  `,
  computed: {
      count() {
          return this.$store.getters.getCount;
      }
  },
  methods: {
      increment() {
          this.$store.commit('increment');
      },
      decrement() {
          this.$store.commit('decrement');
      }
  }
});

三、Vuex的使用案例

1.使用Vuex管理购物车

下面是一个使用Vuex来管理购物车的示例代码：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product)
    },
    removeFromCart(state, productId) {
      const index = state.cart.findIndex(product => product.id === productId)
      if (index !== -1) {
        state.cart.splice(index, 1)
      }
    }
  },
  actions: {
    addProductToCart({ commit }, product) {
      commit('addToCart', product)
    },
    removeProductFromCart({ commit }, productId) {
      commit('removeFromCart', productId)
    }
  },
  getters: {
    cartProducts: state => {
      return state.cart
    }
  }
});

new Vue({
  el: '#app',
  store,
  template: `
    <div>
      <h1>购物车列表</h1>
      <ul>
        <li v-for="product in cartProducts" :key="product.id">
          {{ product.name }}
          <button @click="removeProduct(product.id)">删除</button>
        </li>
      </ul>
      <h1>商品列表</h1>
      <ul>
        <li v-for="product in products" :key="product.id">
          {{ product.name }}
          <button @click="addProduct(product)">加入购物车</button>
        </li>
      </ul>
    </div>
  `,
  computed: {
    cartProducts() {
      return this.$store.getters.cartProducts
    },
    products() {
      return [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        { id: 3, name: '商品3', price: 30 },
        { id: 4, name: '商品4', price: 40 },
        { id: 5, name: '商品5', price: 50 }
      ]
    }
  },
  methods: {
    addProduct(product) {
      this.$store.dispatch('addProductToCart', product)
    },
    removeProduct(productId) {
      this.$store.dispatch('removeProductFromCart', productId)
    }
  }
})

2.使用Vuex管理登录状态

下面是一个使用Vuex来管理登录状态的示例代码：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    isAuthenticated: false
  },
  mutations: {
    login(state) {
      state.isAuthenticated = true
    },
    logout(state) {
      state.isAuthenticated = false
    }
  },
  actions: {
    login({ commit }) {
      commit('login')
    },
    logout({ commit }) {
      commit('logout')
    }
  },
  getters: {
    isAuthenticated: state => {
      return state.isAuthenticated
    }
  }
});

new Vue({
  el: '#app',
  store,
  template: `
    <div>
      <h1 v-if="isAuthenticated">欢迎登录</h1>
      <h1 v-else>请登录</h1>
      <button v-if="isAuthenticated" @click="logout">退出登录</button>
      <button v-else @click="login">登录</button>   
    </div>
  `,
  computed: {
    isAuthenticated() {
      return this.$store.getters.isAuthenticated
    }
  },
  methods: {
    login() {
      this.$store.dispatch('login')
    },
    logout() {
      this.$store.dispatch('logout')
    }
  }
})

以上就是我对于“简单的vuex 的使用案例笔记”的完整攻略，希望对你有所帮助。