Vuex初学总结(一)

1.新建个store.js

为了避免混淆,推荐在src目录下建个store.js,vuex的东西归store.js,vue-router的东西归router.js,这样子思路清晰.

2.在store.js中 Vuex仓库架子搭起来

import Vue from 'vue';
import Vuex, { Store } from 'vuex';
Vue.use(Vuex);
//因为不是在main.js写的,所以下面的Vuex的仓库对象store必须导出来!
export default  new Vuex.Store({
    state :{
        //相当于vue里面的data
    },
    mutations:{
        //他是用来修改state里面的值,同步方法 
    },
    actions:{
        //action去commit中mutations中定义的方法,他是异步的
    },
    getters:{
        //对外获取值
    }
})
### 别忘了在main.js中把store.js导进来

import Vue from 'vue' import App from './App.vue' import store from './store' import './assets/bootstrap.min.css' Vue.config.productionTip = false

new Vue({ router, store, //别忘记了 render: h => h(App) }).$mount('#app')

3.然后做一个a+b的小案例,a,b改变 ,值也改变

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state :{
        a:3,
        b:4
    },
    mutations:{
      addA(state,n){
        console.log("aaaaa");
        state.a+=n;
      },
      addB(state,n){
        console.log("bbbbb");
        state.b+=n
      }

    },
    actions:{
        add_a({commit},n){
            commit("addA",n)
        },
        add_b({commit},n){
            commit("addB",n)
        }
    },
    getters:{
        count(state){
            return state.a+state.b;
        }
    }
})

然后在组件中

<template>
    <div>
        <div>a:  {{a}}</div>
        <div>b:  {{b}}</div>
        <div>
            <button class="btn btn-success mr-3" @click="add_a(5)">a+5</button>
            <button class="btn btn-success" @click="add_b(1)">b+1</button>
        </div>
        <div>
           <h3>总和: {{count}}</h3>
        </div>
    </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return{

        }
    },
    computed:{
        ...mapState(['a','b']),
        //mapState(['a','b'])打印出来是json,computed也是json,json不能嵌套json,所以运用es6 //...语法
        count(){
            return this.$store.getters.count;
        }
    },
    methods:{
        addt(){
            this.$store.dispatch('add',3)
        },
        ...mapActions(['add_a','add_b'])
    }
}
</script>