Skip to content

Commit 6416ebb

Browse files
committed
feat!: add vue 3 support
BREAKING CHANGE: - It only works with Vue 3. - The installation process has been changed due to aligning with Vue 3's new initiation process.
1 parent 4d7f390 commit 6416ebb

File tree

112 files changed

+2772
-1142
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+2772
-1142
lines changed

.circleci/config.yml

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,23 @@ jobs:
2727
paths:
2828
- vuex
2929

30-
lint-types:
31-
<<: *defaults
32-
steps:
33-
- attach_workspace:
34-
at: ~/
35-
- run:
36-
name: Linting
37-
command: |
38-
yarn lint --format junit --output-file test-results/eslint/results.xml
39-
- run:
40-
name: Testing Types
41-
command: |
42-
yarn test:types
43-
- store_test_results:
44-
path: test-results
45-
- store_artifacts:
46-
path: test-results
30+
# lint-types:
31+
# <<: *defaults
32+
# steps:
33+
# - attach_workspace:
34+
# at: ~/
35+
# - run:
36+
# name: Linting
37+
# command: |
38+
# yarn lint --format junit --output-file test-results/eslint/results.xml
39+
# - run:
40+
# name: Testing Types
41+
# command: |
42+
# yarn test:types
43+
# - store_test_results:
44+
# path: test-results
45+
# - store_artifacts:
46+
# path: test-results
4747

4848
test-unit:
4949
<<: *defaults
@@ -80,9 +80,9 @@ workflows:
8080
install-and-parallel-test:
8181
jobs:
8282
- install
83-
- lint-types:
84-
requires:
85-
- install
83+
# - lint-types:
84+
# requires:
85+
# - install
8686
- test-unit:
8787
requires:
8888
- install

README.md

Lines changed: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,58 @@
1-
# Vuex [![Build Status](https://circleci.com/gh/vuejs/vuex/tree/dev.png?style=shield)](https://circleci.com/gh/vuejs/vuex)
1+
# Vuex 4
22

3-
> Centralized State Management for Vue.js.
3+
This is the Vue 3 compatible version of Vuex. The focus is compatibility, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code for Vue 3.
44

5-
<p align="center">
6-
<img width="700px" src="https://raw.githubusercontent.com/vuejs/vuex/dev/docs/.vuepress/public/vuex.png">
7-
</p>
5+
## Status: Alpha
86

9-
- [What is Vuex?](https://vuex.vuejs.org/)
10-
- [Full Documentation](http://vuex.vuejs.org/)
7+
All Vuex 3 feature works. There are a few breaking changes described in a later section, so please check them out. You can find basic usage with both option and composition API at `example` folder.
118

12-
## Examples
9+
Please note that it's still unstable, and there might be bugs. Please provide us feedback if you find anything. You may use [vue-next-webpack-preview](https://github.com/vuejs/vue-next-webpack-preview) to test out Vue 3 with Vuex 4.
1310

14-
- [Counter](https://github.com/vuejs/vuex/tree/dev/examples/counter)
15-
- [Counter with Hot Reload](https://github.com/vuejs/vuex/tree/dev/examples/counter-hot)
16-
- [TodoMVC](https://github.com/vuejs/vuex/tree/dev/examples/todomvc)
17-
- [Flux Chat](https://github.com/vuejs/vuex/tree/dev/examples/chat)
18-
- [Shopping Cart](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart)
11+
## Breaking changes
1912

20-
Running the examples:
13+
### Installation process has changed
2114

22-
``` bash
23-
$ npm install
24-
$ npm run dev # serve examples at localhost:8080
15+
To align with the new Vue 3 initialization process, the installation process of Vuex has changed as well.
16+
17+
You should use a new `createStore` function to create a new store instance.
18+
19+
```js
20+
import { createStore } from 'vuex'
21+
22+
const store = createStore({
23+
state () {
24+
return {
25+
count: 1
26+
}
27+
}
28+
})
29+
```
30+
31+
> This is technically not a breaking change because you could still use `new Store(...)` syntax. However, to align with Vue 3 and also with Vue Router Next, we recommend users to use `createStore` function instead.
32+
33+
Then to install Vuex to Vue app instance, pass the store instance instead of Vuex.
34+
35+
```js
36+
import { createApp } from 'vue'
37+
import store from './store'
38+
import App from './APP.vue'
39+
40+
const app = createApp(Counter)
41+
42+
app.use(store)
43+
44+
app.mount('#app')
2545
```
2646

27-
## License
47+
## Kown issues
48+
49+
- The code is kept as close to Vuex 3 code base as possible, and there're plenty of places where we should refactor. However, we are waiting for all of the test cases to pass before doing so (some tests require Vue 3 update).
50+
- TypeScript support is not ready yet. Please use JS environment to test this for now.
51+
52+
## TODOs as of 4.0.0-alpha.1
2853

29-
[MIT](http://opensource.org/licenses/MIT)
54+
- Add TypeScript support
55+
- Make all unit test working
56+
- Refactor the codebase
57+
- Update the build system to align with Vue 3
58+
- Update docs

build/build.main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ function build (builds) {
2727
}
2828

2929
function buildEntry ({ input, output }) {
30+
input.external = ['vue']
31+
output.globals = { vue: 'Vue' }
3032
const { file, banner } = output
3133
const isProd = /min\.js$/.test(file)
3234
return rollup.rollup(input)

examples/chat/app.js

Lines changed: 0 additions & 19 deletions
This file was deleted.
File renamed without changes.

examples/classic/chat/app.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import 'babel-polyfill'
2+
import { createApp } from 'vue'
3+
import App from './components/App.vue'
4+
import store from './store'
5+
import { getAllMessages } from './store/actions'
6+
7+
const app = createApp(App)
8+
9+
app.use(store)
10+
11+
app.mount('#app')
12+
13+
getAllMessages(store)

examples/chat/components/Message.vue renamed to examples/classic/chat/components/Message.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<li class="message-list-item">
33
<h5 class="message-author-name">{{ message.authorName }}</h5>
44
<div class="message-time">
5-
{{ message.timestamp | time }}
5+
{{ time(message.timestamp) }}
66
</div>
77
<div class="message-text">{{ message.text }}</div>
88
</li>
@@ -13,6 +13,11 @@ export default {
1313
name: 'Message',
1414
props: {
1515
message: Object
16+
},
17+
methods: {
18+
time (value) {
19+
return new Date(value).toLocaleTimeString()
20+
}
1621
}
1722
}
1823
</script>

0 commit comments

Comments
 (0)