Vuexを使う

新しいvuex/store.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
 name: "tanakasan"
};
//状態を変更する
const mutations = {
 //1 
 changeNameToZhangsan(state) {
 state.name = "lisi";
 },
 //2 
 changeNameWithParam(state, payload) {
 state.name = payload.name;
 }
};
//非同期に状態を変更する
const actions = {
 // 
 changeNameAsync(context) {
 let _name = context.state.name;
 setTimeout(() => {
 context.commit("changeNameToZhangsan");
 }, 1000);
 },
 // 
 changeNameWithParamAsync(context, payload) {
 setTimeout(() => {
 context.commit("changeNameWithParam", payload);
 }, 1000);
 }
};
//getters次のアクションを選択する条件判定
const getters = {
 // 
 formatterName: state => {
 let postfix= "";
 if(state.name == "tanakasan"){
 postfix = "nice";
 };
 return state.name+" "+postfix;
 },
 // 
 customFormatterName: (state) => (val) => {
 let postfix = "";
 if(state.name == "tanakasan"){
 postfix = val;
 };
 return state.name+" "+postfix;
 }
}
export default new Vuex.Store({
 state,
 mutations,
 actions,
 getters
});

main.js

import store from "./vuex/store";//ストアを導入する.js
new Vue({
 el: "#app",
 router,
 store,//ストアに相当する:store,登録後、サブコンポーネントに thisを使うことができる。.$store 
 components: { App },
 template: "<App/>"
});

demo.vue

<template>
 <div>
 <div>storeファイル名は:{{ this.$store.state.name }}</div>
 <div>
 <button @click="setNameDefault()">パラメータなしでlisiを設定する</button>
 </div>
 <input type="text" v-model="name" />
 <button @click="setNameAsync()">パラメータを設定する</button>
 <div>
 <p> </p>
 <p>{{ this.$store.getters.formatterName }}</p>
 <p> </p>
 <p>{{ this.$store.getters.customFormatterName("cool") }}</p>
 </div>
 <div>
 <p>state</p>
 <p>{{ame1 }}</p>
 </div>
 <div>
 <p>getter</p>
 <p>{{ customFormatterName("cool") }}</p>
 </div>
 <button @click="getMock()">mockリクエストをテストする</button>
 </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
 name: "HelloWorld",
 data() {
 return {
 name: ""
 };
 },
 computed: {
 ...mapState({
 //state=>mapState 状態管理
ame: "name",
ame1: function(state) {
 return state.name + "111";
 }
 }),
 ...mapGetters([
 //getter=>mapGetters 条件選択
 "formatterName",
 "customFormatterName"
 ])
 },
 methods: {
 ...mapMutations([
 //mutation=>mapMutations 状態を変更する
 "changeNameToZhangsan"
 ]),
 ...mapActions({
 //action=>mapActions  
 changeNameWithParamAsync1: "changeNameWithParamAsync"
 }),
 setNameDefault() {
 this.changeNameToZhangsan();
 },
 getMock(){//mock 
 this.$axios({
 url:'/parameter/query',
 method: "get",
 }).then(res =>{
 console.log(res.data);
 });
 },
 setNameAsync() {
 this.changeNameWithParamAsync1({
 name: this.name
 });
 // //投稿を読み込む
 // this.$store.dispatch("changeNameWithParamAsync", {
 // name: this.name
 // });
 // //オブジェクトを投稿する
 // this.$store.dispatch({
 // type: "changeNameWithParamAsync", //固定
 // name: this.name
 // });
 }
 }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>