vuex

image.png

main

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

Vue.config.productionTip = false


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

app.vue

<template>
  <div class="app">
    <h2> app</h2>
    number:{{$store.state.number.count}} <button @click="numberIncrement">+</button>
    <br>
    count:{{$store.state.count.count}} <button @click="countIncrement">+</button>
    <br>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {

    }
  },
  methods: {
    // numberIncrement() {
    //   this.$store.commit('number/increment')
    // },
    // countIncrement() {
    //   this.$store.commit('count/increment')
    // }
    ...mapMutations({
      numberIncrement: {
        type: 'number/increment'
      },
      countIncrement: {
        type: 'count/increment'
      }
    })
  }
}
</script>
<style lang="scss" scoped>
</style>

app-back.vue

<template>
  <div class="app">
    <!-- 写法1 全写方式 -->
    app----{{count}} ---- number:{{number}}
    <br>
    count:{{$store.state.count}}
    <br>
    getters: {{$store.getters.getCount}}---- {{getCount}}
    <br>
    <button @click="addCount">+</button>
    <button @click="subCount">-</button>

    <!-- {{this.$store.state.todos}} -->

    <!-- <button @click="getTodos">getTodos</button> -->
    <router-view></router-view>
  </div>
</template>
<script>

//  写法3 辅助函数写法
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      // count: this.$store.state.count
    }
  },
  created() {
    // this.$store.dispatch('getTodos')
    this.getTodos()
  },
  methods: {
    ...mapMutations({
      addCount: {
        type: 'ADD_COUNT',
        payload: 2
      },
      subCount: {
        type: 'SUB_COUNT',
        payload: 2
      }
    }),
    ...mapActions(['getTodos'])
    // addCount() {
      //   // 不建议使用 该写法
      //   // this.$store.state.count++
      //   // this.$store.commit('addCount')
      //   // this.$store.commit('addCount', 2)
      //   this.$store.commit({
      //     type: 'addCount',
      //     payload: 2
      //   })
      // },
      // subCount() {
      //   this.$store.commit({
      //     type: 'subCount',
      //     payload: 2
      //   })
      // }
      // ...mapMutations(['addCount', 'subCount'])

    },
    computed: {
      // 写法2 通过计算属性方式
      // count() {
      //   return this.$store.state.count
      // },
      // number() {
      //   return this.$store.state.number
      // }
      ...mapState(['count', 'number']),
    ...mapGetters(['getCount'])
  }
}
  </script>
  <style lang="scss" scoped>
  </style>

types.js

export const ADD_COUNT = 'ADD_COUNT'
export const SUB_COUNT = 'SUB_COUNT'
export const GET_TODOS = 'GET_TODOS'

state.js

export default {
  count: 0,
  number: 2,
  todos: []
}

mutation.js

import { ADD_COUNT, SUB_COUNT, GET_TODOS } from './types'
export default {
  [ADD_COUNT](state, { payload }) {
    state.count += payload
  },
  [SUB_COUNT](state, { payload }) {
    state.count -= payload
  },
  [GET_TODOS](state, payload) {
    console.log(payload)
    state.todos = payload
  }
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
// import state from './state'
// import mutations from './mutations'
// import actions from './actions'
// import getters from './getters'
import number from './modules/number'
import count from './modules/count'
Vue.use(Vuex)

export default new Vuex.Store({
  // state 相当于 data  state全局 data 私有的
  // state,
  // // mutations可以修改数据，但是不能执行异步操作
  // mutations,
  // // actions  可以执行异步请求，但是不对数据进行操作
  // actions,
  // // filter 和 computed 组合
  // getters,
  modules: {
    number,
    count
  }
})


// vue  add vuex

index-back.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  // state 相当于 data  state全局 data 私有的
  state: {
    count: 0,
    number: 2,
    todos: []
  },
  // mutations可以修改数据，但是不能执行异步操作
  mutations: {
    ADD_COUNT(state, { payload }) {
      state.count += payload
    },
    SUB_COUNT(state, { payload }) {
      state.count -= payload
    },
    GET_TODOS(state, payload) {
      console.log(payload)
      state.todos = payload
    }
  },
  // actions  可以执行异步请求，但是不对数据进行操作
  actions: {
    async getTodos({ commit }) {
      const res = await axios.get('http://itfly.vip:8888/api/getlunbo')
      commit('GET_TODOS', res.data)
    }
  },
  // filter 和 computed 组合
  getters: {
    getCount(state) {
      return state.count + '~~~~~~~~'
    }
  }
})


// vue  add vuex

getters.js

export default {
  getCount(state) {
    return state.count + '~~~~~~~~'
  }
}

action.js

import axios from 'axios'
import { GET_TODOS } from './types'
export default {
  async getTodos({ commit }) {
    const res = await axios.get('http://itfly.vip:8888/api/getlunbo')
    commit(GET_TODOS, res.data)
  }
}

modules number.js

export default {
  namespaced: true,
  state: {
    count: 2
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {}
}

modules count.js

export default {
  // 开启命名空间
  namespaced: true,
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {}
}

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router

components
home.vue

<template>
  <div class="home">
    home----{{$store.state.count}}

    <!-- {{this.$store.state.todos}} -->
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
</style>