快速掌握Vue3.0中如何上手Vuex状态管理

快速掌握Vue3.0中如何上手Vuex状态管理

在Vue 3.0 中使用Vuex状态管理有以下步骤：

第一步：安装 Vuex

使用npm或yarn进行安装：

// npm
npm install vuex@next

// yarn
yarn add vuex@next

第二步：创建store

创建一个store.js文件来管理你的状态管理:

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      // example of a state property
      count: 0
    }
  }
});

export default store;

第三步：将store绑定至Vue根实例

导入store.js并绑定便可：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

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

第四步：调用store中的数据

使用 computed 属性来访问我们的 state

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'Counter',
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  },
};
</script>

我们使用 $store.state.count 来访问count的值，并使用 $store.commit来提交我们的更新。

第五步：修改store中的数据

我们通过 commit 方法可以修改store中的数据：

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

mutations中的函数接收的第一个参数即为我们的state对象，我们修改state的值即可。

示例演示

下面我们来演示一下在购物车应用中如何应用Vuex状态管理：

第一步：安装 Vuex

使用npm或yarn进行安装：

// npm
npm install vuex@next

// yarn
yarn add vuex@next

第二步：创建store

我们的store.json文件内容如下, 模拟一个简单的购物车：

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      cart: [],
    };
  },
  mutations: {
    addToCart(state, item) {
      state.cart.push(item);
    },
    removeFromCart(state, index) {
      state.cart.splice(index, 1);
    },
  },
});

export default store;

第三步：将store绑定至Vue根实例

导入store.js并绑定便可：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

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

第四步：调用store中的数据

我们使用 $store.state.cart.length 来获取购物车中物品的数量，使用 v-for 渲染所有的购物车物品：

<template>
  <div>
    <h2>Cart ({{ $store.state.cart.length }} items)</h2>
    <ul>
      <li v-for="(item, index) in $store.state.cart" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click.prevent="removeFromCart(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'Cart',
  methods: {
    removeFromCart(index) {
      this.$store.commit('removeFromCart', index);
    },
  },
};
</script>

通过 $store.state.cart 属性即可获取购物车中所有的物品，使用 v-for 渲染出来。

第五步：修改store中的数据

我们可以通过 commit 方法来添加/删除物品：

<template>
  <div>
    <h2>Products</h2>
    <ul>
      <li v-for="(item, index) in products" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click.prevent="addToCart(item)">Add to Cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'Products',
  data() {
    return {
      products: [
        {
          name: 'Product One',
          price: 12.99,
        },
        {
          name: 'Product Two',
          price: 6.99,
        },
        {
          name: 'Product Three',
          price: 24.99,
        },
      ],
    };
  },
  methods: {
    addToCart(item) {
      this.$store.commit('addToCart', item);
    },
  },
};
</script>

通过 $store.commit('addToCart', item) 方法即可将当前商品添加到购物车中，通过 $store.commit('removeFromCart', index) 删除指定的商品。