Skip to content

Commit 0b4481b

Browse files
posvaposva
committed
📝 Add complete example
1 parent 8439f27 commit 0b4481b

File tree

1 file changed

+153
-0
lines changed

1 file changed

+153
-0
lines changed

‎packages/vuexfire/examples/index.html

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>VueFire Todo App Demo</title>
6+
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
7+
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
8+
<script src="https://unpkg.com/vue"></script>
9+
<script src="https://unpkg.com/vuex"></script>
10+
<script src="dist/vuexfire.js"></script>
11+
</head>
12+
<body>
13+
14+
<!--
15+
Before running this example, make sure to:
16+
17+
1. npm install
18+
2. npm run build
19+
20+
Then you can open this file in your browser.
21+
If you just prefer to see this example with
22+
the latest published version of VueFire, you
23+
play with the code in this fiddle:
24+
25+
https://jsfiddle.net/posva/wtyop5jy/
26+
-->
27+
28+
<div id="app">
29+
<button @click="toggleTodos">Toggle todos</button>
30+
<br/>
31+
<input
32+
v-model.trim="newTodoText"
33+
@keyup.enter="addTodo"
34+
placeholder="Add new todo"
35+
>
36+
<ul>
37+
<li v-for="todo in todos">
38+
<input
39+
:value="todo.text"
40+
@input="updateTodoText(todo, $event.target.value)"
41+
>
42+
<button @click="removeTodo(todo)">X</button>
43+
</li>
44+
</ul>
45+
46+
<h4>collection with refs</h4>
47+
48+
<ul>
49+
<li v-for="moment in moments">{{ moment }}</li>
50+
</ul>
51+
52+
<h5>Original data</h5>
53+
54+
<ul>
55+
<li v-for="tweet in tweets">{{ tweet }}</li>
56+
</ul>
57+
58+
<p>config: </p>
59+
<pre>
60+
{{ config }}
61+
</pre>
62+
</div>
63+
64+
<script>
65+
/* global Vue, firebase, Vuefire */
66+
/* Vue.use(Vuexfire.default)*/
67+
firebase.initializeApp({
68+
projectId: 'vue-fire-store',
69+
databaseURL: 'https://vue-fire-store.firebaseio.com'
70+
})
71+
const db = firebase.firestore()
72+
const todos = db.collection('todos')
73+
const unFinishedTodos = todos.where('finished', '==', false)
74+
const finishedTodos = todos.where('finished', '==', true)
75+
let currentTodos = finishedTodos
76+
const config = db.collection('configs').doc('jORwjIykFo2NmkdzTkhU')
77+
78+
Vue.use(Vuex)
79+
80+
const { Store, mapState } = Vuex
81+
const { firebaseAction, firebaseMutations } = Vuexfire
82+
83+
const store = new Vuex.Store({
84+
strict: true,
85+
state: {
86+
todos: [],
87+
tweets: [],
88+
moments: [],
89+
config: null
90+
},
91+
92+
mutations: firebaseMutations,
93+
94+
actions: {
95+
bindRef: firebaseAction(({ bindFirebaseRef }, { name, ref }) => {
96+
bindFirebaseRef(name, ref)
97+
}),
98+
99+
init: firebaseAction(({ bindFirebaseRef }) => {
100+
bindFirebaseRef('config', config)
101+
bindFirebaseRef('todos', currentTodos)
102+
bindFirebaseRef('tweets', db.collection('tweets'))
103+
bindFirebaseRef('moments', db.collection('moments'))
104+
})
105+
}
106+
})
107+
108+
new Vue({
109+
el: '#app',
110+
store,
111+
data: {
112+
newTodoText: ''
113+
},
114+
115+
computed: mapState(['todos', 'tweets', 'moments', 'config']),
116+
117+
methods: {
118+
addTodo: function () {
119+
if (this.newTodoText) {
120+
todos.add({
121+
finished: false,
122+
text: this.newTodoText,
123+
created: firebase.firestore.FieldValue.serverTimestamp()
124+
})
125+
this.newTodoText = ''
126+
}
127+
},
128+
updateTodoText: function (todo, newText) {
129+
todos.doc(todo.id).update({ text: newText })
130+
},
131+
removeTodo: function (todo) {
132+
todos.doc(todo.id).delete()
133+
},
134+
toggleTodos () {
135+
currentTodos = currentTodos === unFinishedTodos
136+
? finishedTodos
137+
: unFinishedTodos
138+
this.$store.dispatch(
139+
'bindRef', {
140+
name: 'todos',
141+
ref: currentTodos
142+
}
143+
)
144+
}
145+
},
146+
147+
created () {
148+
this.$store.dispatch('init')
149+
}
150+
})
151+
</script>
152+
</body>
153+
</html>

0 commit comments

Comments
 (0)