Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
oleg
/
vuex
-ын хуулбар https://github.com/vuejs/vuex.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

counter example

Evan You 9 жил өмнө
parent
a116240c6a
commit
4044a27a5c
7 өөрчлөгдсөн 95 нэмэгдсэн , 17 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 22 0
      examples/counter/Counter.vue
  2. 11 0
      examples/counter/index.html
  3. 7 0
      examples/counter/main.js
  4. 41 0
      examples/counter/vuex.js
  5. 12 16
      examples/shopping-cart/vuex/actions.js
  6. 1 1
      examples/todomvc/index.html
  7. 1 0
      package.json

+ 22 - 0
examples/counter/Counter.vue
Файл харах 

@@ -0,0 +1,22 @@
 
+<template>
 
+  <div>
 
+    Clicked: {{ count }} times
 
+    <button @click="increment">+</button>
 
+    <button @click="decrement">-</button>
 
+    <button @click="incrementIfOdd">Increment if odd</button>
 
+    <button @click="incrementAsync">Increment async</button>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import vuex from './vuex'
 
+
 
+export default {
 
+  data () {
 
+    return {
 
+      count: vuex.get('count')
 
+    }
 
+  },
 
+  methods: vuex.actions
 
+}
 
+</script>

+ 11 - 0
examples/counter/index.html
Файл харах 

@@ -0,0 +1,11 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>vuex counter example</title>
 
+  </head>
 
+  <body>
 
+    <counter></counter>
 
+    <script src="example.build.js"></script>
 
+  </body>
 
+</html>

+ 7 - 0
examples/counter/main.js
Файл харах 

@@ -0,0 +1,7 @@
 
+import Vue from 'vue'
 
+import Counter from './Counter.vue'
 
+
 
+new Vue({
 
+  el: 'body',
 
+  components: { Counter }
 
+})

+ 41 - 0
examples/counter/vuex.js
Файл харах 

@@ -0,0 +1,41 @@
 
+import Vue from 'vue'
 
+import Vuex from '../../src'
 
+
 
+Vue.use(Vuex)
 
+
 
+const INCREMENT = 'INCREMENT'
 
+const DECREMENT = 'DECREMENT'
 
+
 
+const state = {
 
+  count: 0
 
+}
 
+
 
+const actions = {
 
+  increment: INCREMENT,
 
+  decrement: DECREMENT,
 
+  incrementIfOdd: () => (dispatch, state) => {
 
+    if (state.count % 2 === 1) {
 
+      dispatch(INCREMENT)
 
+    }
 
+  },
 
+  incrementAsync: () => (dispatch, state) => {
 
+    setTimeout(() => {
 
+      dispatch(INCREMENT)
 
+    }, 1000)
 
+  }
 
+}
 
+
 
+const mutations = {
 
+  [INCREMENT] (state) {
 
+    state.count++
 
+  },
 
+  [DECREMENT] (state) {
 
+    state.count--
 
+  }
 
+}
 
+
 
+export default new Vuex({
 
+  state,
 
+  actions,
 
+  mutations
 
+})

+ 12 - 16
examples/shopping-cart/vuex/actions.js
Файл харах 

@@ -3,22 +3,18 @@ import * as types from './action-types'
 
 
 
 export const addToCart = types.ADD_TO_CART
 
 export const addToCart = types.ADD_TO_CART
 
 
 
-export function checkout (products) {
 
-  return (dispatch, state) => {
 
-    const savedCartItems = [...state.cart.added]
 
-    dispatch(types.CHECKOUT_REQUEST)
 
-    shop.buyProducts(
 
-      products,
 
-      () => dispatch(types.CHECKOUT_SUCCESS),
 
-      () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
 
-    )
 
-  }
 
+export const checkout = (products) => (dispatch, state) => {
 
+  const savedCartItems = [...state.cart.added]
 
+  dispatch(types.CHECKOUT_REQUEST)
 
+  shop.buyProducts(
 
+    products,
 
+    () => dispatch(types.CHECKOUT_SUCCESS),
 
+    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
 
+  )
 
 }
 
 }
 
 
 
-export function getAllProducts () {
 
-  return dispatch => {
 
-    shop.getProducts(products => {
 
-      dispatch(types.RECEIVE_PRODUCTS, products)
 
-    })
 
-  }
 
+export const getAllProducts = () => dispatch => {
 
+  shop.getProducts(products => {
 
+    dispatch(types.RECEIVE_PRODUCTS, products)
 
+  })
 
 }
 
 }

+ 1 - 1
examples/todomvc/index.html
Файл харах 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
-    <title>vue store example</title>
 
+    <title>vuex todomvc example</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <app></app>
 
     <app></app>

+ 1 - 0
package.json
Файл харах 

@@ -4,6 +4,7 @@
 
   "description": "state management for Vue.js",
 
   "description": "state management for Vue.js",
 
   "main": "src/index.js",
 
   "main": "src/index.js",
 
   "scripts": {
 
   "scripts": {
 
+    "dev-counter": "cd examples/counter && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
 
     "dev-todomvc": "cd examples/todomvc && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
 
     "dev-todomvc": "cd examples/todomvc && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
 
     "dev-cart": "cd examples/shopping-cart && webpack-dev-server --inline --hot --config ../webpack.shared.config.js"
 
     "dev-cart": "cd examples/shopping-cart && webpack-dev-server --inline --hot --config ../webpack.shared.config.js"
 
   },
 
   },