Vuex学习总结（2）

2.状态管理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style></style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="increment">加一</button> {{count}}
        </div>
        <script>
		/*
			状态管理模式
			状态(state)驱动视图(view)
			动作(actions)是通过视图改变状态的方式(用户输入)
		*/
			new Vue({
				data() {
					return {
						count: 0
					}
				},				
				methods: {
					increment() {
						this.count++
					}
				}
			}).$mount('#app')
        </script>
    </body>
</html>

共享状态的简单方法就是将状态写在组件外面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
            
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
        <script>
			var buttonCounterData = {
				count: 0
			}
			// 定义一个名为 button-counter 的新组件
			Vue.component('button-counter', {
				data: function () {
					return buttonCounterData
				},
				template: '<button v-on:click="count++">点击了 {{ count }} 次.</button>'
			});

			new Vue({ el: '#app' });
        </script>
    </body>
</html>

3.Vuex入门

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
  actions: {
  },
  modules: {
  }
})

<!-- Counter.vue -->
<template>
    <div>
        <button @click="increment">加一</button> {{count}}
    </div>
</template>

<script>
    export default {
        name: "Counter",
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            increment() {
                this.$store.commit('increment')
            }
        }
    }
</script>

<style scoped>

</style>

<!-- About.vue -->
<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{$store.state.count}}
  </div>
</template>

这里在Counter组件提交Vuex的mutations。

Vuex入门的示例代码已上传至GitHub仓库：https://github.com/gorgeous-h/vuex-demo1/tree/master。
添加Octotree扩展程序，可以将Github项目代码以树形格式展示。