vue 使用vuex

app.vue:

<template>
  <div id="app">
    <input type="button" value="增加" @click="add">
    <h1>{{count}}</h1>
  </div>
</template>

<script>
import {mapGetters,mapActions} from "vuex"
export default {
  name: 'app',
 computed:mapGetters(["count"]),
 methods:mapActions(["add"])
}
</script>

import Vue from 'vue'
import App from './App.vue'
import store from "./stores"
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

store下面的文件夹内：

export const ADD ="ADD";

import * as types from "./types"
const actions={
    add:({commit})=>{
        commit(types.ADD)
    }
}
export default{
    actions
}

import {ADD} from "./types"
import getters from "./getters"
const state={
    count:0
}
const mutations={
    [ADD](state){
        state.count++
    }
}
export default {
    state,
    mutations,
    getters
}

export default{
    count:(state)=>{
        return state.count
    }
}

index.js:


import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)
import mutations from "./mutations"
import actions from "./actions"
export default new Vuex.Store({
    modules:{
        mutations,
         actions
    }

    
})


要点：
在main里面一定要导入store

Links: 15