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

867 阅读1分钟

此项目主要是介绍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了