vuex入门教程

之前理解了eventbus事件总线，vuex就会好理解一点；
1.npm install vuex --save //安装vuex

2.创建store文件夹，添加store.js文件，文件格式如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use('Vuex');               

const state={};                   //定义状态数据，必须
const mutations={};           //修改状态，同步的。在组件中使用$store.commit('',params)。和自定义事件类似
const getters={};                //处理数据，在组件中使用$store.getters.fun
const actions={};              //异步操作，提交更改给mutations,在组件中使用$store.dispath.fun()
const modules={};            //大型项目，子模块管理

const store=new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules
})

export default store;

3.main.js引入store，设置如下

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4.组件应用

<template>
    <div class='count'>
        <p>{{msg}}</p>
        <h1>store数据测试</h1>
        <h2>{{$store.state.count}}</h2>
        <h2>该逐渐的count:{{count}}</h2> 
        <button @click="add(2)">增加</button>
        <button @click="reduce(2)">减少</button>
    </div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from "vuex"      // es6便捷方法：需要引入    
export default{
    name:'count',
    data () {
        return {
            msg:"vuex简单应用测试"
        }
    },
    computed:{
       // ...mapState(["count"]),            
       // ...mapGetters({          
       //     count:"count"
       // })
         count(){
            return this.$store.getters.count;
         }
    },
    methods: {
         add(n){
            this.$store.commit("add",n)
         },
         reduce(n){
             this.$store.commit("reduce",n)
         }
        //...mapMutations({
         //   add:'add',
         //   reduce:'reduce'
       // })
    }
}
</script>

<style></style>