安装Vuex

安装完成后在package.json中查看vuex的版本

{
  "name": "vue3-meteor",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.2",
    "vue-router": "^4.0.0-rc.5",
    "vuex": "^4.0.0-rc.2"  // 新版本的vuex
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.2",
    "vite": "^1.0.0-rc.8"
  }
}

创建store

创建/src/store/index.js 内容如下：

import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            count: 1
        };
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        increment(context) {
            context.commit('increment');
        }
    },
    getters: {
        count(state) {
            return state.count;
        }
    }
});

export default store;

在store中定义了一个count

使用store

在main.js中使用store

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

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

改造 HelloWorld.vue, 将count修改为使用store中的内容

<template>
  <h1>{{ msg }}</h1>
  <button @click="handleClick">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      // count: 0
    }
  },
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    handleClick() {
      this.$store.dispatch('increment')
    }
  }
}
</script>

运行程序查看效果