基于vue3.0 + vue-cli4.x + vuex4 搭建一个简易项目

此项目主要是介绍vuex4.0的用法

一、首先安装vue脚手架 cli4.x

npm install -g @vue/cli

如果已经安装了老版本先卸载

npm uninstall vue-cli -g 或
yarn global remove vue-cli

如官网所示 npm install -g vue-cli 已经不再使用（如果用了安装是老版本）

二、创建项目

vue creat  myProject

执行成功后让选择vue版本 选Vue 3

三、安装vuex4

npm i -S vuex@4.0.0-alpha.1
或者用 yarn add vuex@4.0.0-alpha.1

然后进入项目开始配置vuex

重大变化：

为了与新的Vue 3初始化过程保持一致，Vuex的安装过程已更改。

为了创建一个新的商店实例，现在鼓励用户使用新引入的createStore功能。

1、在src目录下 新建store.js

import {createStore} from 'vuex'

export const store = createStore({
    state () {
      return {
        count: 11
      }
    },
    actions:{
        
    },
    mutations:{

    }
})

其实这个时候仍然可以使用new Store(...)语法，但是不被建议

2、挂载到vue实例

在src目录下找到main.js

import { createApp } from 'vue'
import {store} from './store'
import App from './App.vue'
 
const app = createApp(App)
app.use(store)
app.mount('#app')

这个时候安装配置已经完毕，接下来就可以正常流程去使用vuex了