Vuex

1. 注入store 到 main.js

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

import store from './store/index.js'

Vue.config.productionTip = false

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

2. 創建 store/index.js 文件夾存放vuex的state、getters、mutations、actions

(1)不使用module（模塊）

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

import HelloWorld from '../components/HelloWorld.js'

Vue.use(vuex);

let store = new vuex.Store({
	state:{...},
        getters:{...},
        mutations:{...},
        actions:{...}
});

export default store;

(2)使用module（模塊）

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

import HelloWorld from '../components/HelloWorld.js'

Vue.use(vuex);

let store = new vuex.Store({
	modules:{
		HelloWorld
	}
});

export default store;

HelloWorld.js

export default {
	state:{
		str1 : 'Hello',
		str2 : 'World',
		str3 : '!',
		num : 1
	},
	getters:{
		getStr:state=>{
			return state.str1 +' . '+ state.str2 +' . '+ state.str3
		}
	},
	mutations:{
		add(state,payload){
			state.num += payload.add;
		},
		dec(state,payload){
			state.num -= payload.dec;
		}
	}
}

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg1 }}</h1>
    <h2>{{ str1 }} {{ str2 }} {{ str3 }}</h2>
    <h2>{{ msg2 }}</h2>
    <h2>{{ str4 }}</h2>
    <h1 @click="addNum">{{ num }}</h1>
    <h1 @click="dec({dec:1})">{{ num }}</h1>
  </div>
</template>

<script>
import { mapState, mapGetters ,mapMutations } from 'vuex'
// import { createNamespacedHelpers } from 'vuex'
// const { mapState } = createNamespacedHelpers('/HelloWorld');
export default {
  name: 'HelloWorld',
  data () {
    return {
      
    }
  },
  computed:{
    msg1(){
      return this.$store.state.HelloWorld.str1 + '....'
    },
    ...mapState({
      str1: state => state.HelloWorld.str1,
      str2: state => state.HelloWorld.str2,
      str3: state => state.HelloWorld.str3,
      num : state => state.HelloWorld.num
    }),
    msg2(){
      return this.$store.getters.getStr;
    },
    ...mapGetters([
      'getStr'
    ])

  },
  methods:{
    addNum(){
      this.$store.commit('add',{add:2})
    },
    ...mapMutations([
      'dec' // 參數：payload注入方式：<h1 @click="dec({dec:1})">{{ num }}</h1>
    ])
  }
}
</script>