基於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了