vuex狀態管理知識點記錄

src/vuex/store.js

// src/vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
// import createLogger from 'vuex/logger'

const state = {
  count: 0,
  firstName: 'liu',
  lastName: 'saijin',
  hi: 'hello',
  msg: 'Welcome to Your Vue.js App'
}
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  },
  setName (state) {
    state.lastName = 'xiaoxiao'
  },
  setMsg (state) {
    state.msg = 'Welcome to Your use vuex'
  }
}

const actions = {
  increment: ({
    commit
  }) => commit('increment'),
  decrement: ({
    commit
  }) => commit('decrement'),
  incrementIfOdd: ({
    commit,
    state
  }) => {
    if ((state.count + 1) % 2 === 0) {
      commit('increment')
    }
  },
  setName: ({
    commit
  }) => {
    commit('setName')
  }
}
const getters = {
  count: state => state.count,
  evenOrOdd: state => state.count % 2 === 0 ? '偶數' : '奇數',
  fullName: state => state.firstName + '  ' + state.lastName
}
// 在 Vue 中，註冊 Vuex
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
  // ,
  // plugins: process.env.NODE_ENV !== 'production' ? [createLogger()] : []
})
複製程式碼

helloWorld.vue

<!-- helloWorld.vue -->
<template>
  <div class="hello">
    <div>{{hi}} 我的全名是： {{fullName}}</div>
    <div>當前的count是{{count}} 他是一個{{evenOrOdd}}</div>
    <h1>{{ msg }}</h1>
    <!-- <button @click="add">增加count</button><button @click="decr">減少count</button> -->
    <button @click="increment">增加count</button><button @click="decrement">減少count</button><br>
    <button @click="setName">修改姓名</button><button @click="setMsg">修改文案</button>
  </div>
</template>

<script>
// 第一中使用方式， 直接呼叫
// import { mapGetters, mapMutations, mapActions } from 'vuex'
// 第二中使用方式， 通過mapActions呼叫
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {
  name: 'HelloWorld',
  computed: {
    ...mapState(['hi', 'msg']),
    ...mapGetters(['evenOrOdd', 'fullName', 'count'])
  },
  data () {
    return {
    }
  },
  // 第一中使用方式， 直接呼叫
  // methods: {
  //   add () {
  //     console.log('zengjia')
  //     this.$store.commit('increment') // 通過提交(commit) 一個 mutation來實現修改state
  //   },
  //   decr () {//action
  //     this.$store.dispatch('decrement')
  //   }
  // }
  methods: {
    ...mapActions(['increment', 'decrement', 'setName']),
    ...mapMutations(['setMsg']),
    add () {
      console.log('add')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
複製程式碼

main.js

// main.js
import Vue from 'vue'
import store from './vuex/store'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

複製程式碼