vue: Vuex基础

回顾兄弟组件传值。

父组件需要给result组件传值，和接收处理counter组件中传来的自定义事件，实现兄弟组件传值。

        <!-- 父组件App.vue -->
<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Vuex</h1>
        <app-counter @update="count += $event"></app-counter>
        <hr>
        <app-result :count="count"></app-result>
        <!-- 往result组件传值 -->
      </div>
    </div>
  </div>
</template>

<script>
 import Result from "./components/result"
 import Counter from "./components/counter"
 export default {
 data() {
 return {
        count: 0
      }
    },
    components: {
     'app-counter': Counter,
     'app-result': Result,
    }
  }
</script>

<style>

</style>
      

子组件result: 使用prop接收父组件中传来的count值

        <template>
    <div>
        <p>结果是: {{ count }}</p>
    </div>
</template>
<script>

 export default {
        props: ['count']
    }
</script>
      

子组件counter: 定义自定义时间$emit，并传往父组件

        <template>
    <div>
        <button class="btn btn-primary" @click="increase">加</button>
        <button class="btn btn-primary" @click="deincrease">减</button>
 <!-- 绑定定义事件，往父组件传值 -->
    </div>
</template>
<script>
export default {
    methods: {
 increase() {
 this.$emit('update', 1)
        },
 deincrease() {
 this.$emit('update', -1)
        }
 // 定义自定义事件
    }
}
</script>
      

Vuex: 状态(数据)管理系统

数据分为两类:

一类只在单个组件内使用，另一类在父子组件和兄弟组件和其他组件间传值，这种组件传值麻烦。

vuex思想: 在外部做一个容器，改变容器的值即可改变组件的值

安装:

npm isntall vuex --save

或在使用脚手架创建项目时候勾选vuex

使用:

引入vuex，使用vuex，创建vuex实例，在vue实例中使用vuex实例

我把vuex单独分成了一个文件index.js: 在vuex实例state字段中定义count值，

        import Vuex from 'vuex'           // 引入Vuex
import Vue from 'vue'
Vue.use(Vuex)                     // 使用Vuex 
export default new Vuex.Store({   // 创建暴露Vuex实例
  state: {
    count: 100,
  }
})

      

main.js文件: 在vue实例中使用vuex实例

        import Vue from 'vue'
import App from './App.vue'
import store from './store' // 会直接找index.js
Vue.config.productionTip = false

new Vue({
  store,
 render: h => h(App),
}).$mount('#app')

      

执行加减的counter.vue: 改变$store.state.count的值

        <template>
    <div>
        <button class="btn btn-primary" @click="increase">加</button>
        <button class="btn btn-primary" @click="deincrease">减</button>
    </div>
</template>
<script>
export default {
    methods: {
        increase() {
            this.$store.state.count++
            // 只是示范 不能直接改变
        },
        deincrease() {
            this.$store.state.count--
        }
    }
}
</script>
      

显示结果的result.vue：当state.count值发生改变，就出发计算属性函数，保证数据的实时更新

        <template>
    <div>
        <p>结果是: {{ count }}</p>
    </div>
</template>
<script>
 export default {
     computed: {
         count() {
             return this.$store.state.count
         }
         // 当state.count值发生改变，就出发计算属性函数，保证数据的实时更新
        }
    }
</script>