应用介绍

main.js代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store'

Vue.config.productionTip = false;

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

vuex/store.js代码：

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

Vue.use(Vuex);
const state = {
    name:'张三'
};

const mutations = {
  //1.不带参数的方式
  chanageNameToZhangsan(state){
    state.name = '李四';
  },
  //2.带参数
  chanageNameToParam(state , param){
    state.name = param.name
  }

};

const actions = {
  // 1.无参
  changeNameAsync(context){
      // 实例说明我们可以通过context.state来获取store中的变量
    let _name = context.state.name;
    // 异步更改
    setTimeout(() => {
      context.commit('chanageNameToZhangsan');
    },500);
  },
  // 2.有参
  changeNameToParamAsync(context,param){
    // 异步更改
    setTimeout(() => {
      context.commit('chanageNameToParam',param);
    },500);
  }
};

const getters = {
  // 1.不带参数的getter
  formatterName:state => {
    let postfix = '';
    if( state.name === '张三' ){postfix = '最棒';}
    return state.name + postfix;
  },
  // 2.带参数的getter
  customFormatterName:(state) => (val) => {
    let postfix = '';
    if( state.name === '张三'){postfix = val;}
    return state.name + postfix;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

Helloworld.vue代码：

<template>
  <div class="hello">
    store中的名字 {{ this.$store.state.name }}
    <div>
      <input type="button" value="不带参数默认李四"  @click="setNameDefault">
    </div>
    <div>
      <input v-model="changeName" type="text" >
      <input type="button" value="带参数" @click="setName()">
    </div>

    <!-- Async异步 -->
    <div>
      <input type="button" value="异步不带参数默认李四"  @click="setNameDefaultAsync">
    </div>
    <div>
      <input v-model="changeName" type="text" >
      <input type="button" value="异步带参数" @click="setNameAsync()">
    </div>
    <!-- 不带参数getter得到的数据 -->
    <div>
      <p>不带参数getter得到的数据</p>
      <b>{{ this.$store.getters.formatterName }}</b>
    </div>
    <!-- 带参数getter得到的数据 -->
    <div>
      <p>带参数getter得到的数据</p>
      <b>{{ this.$store.getters.customFormatterName('你是世间少有的美男子！') }}</b>
    </div>
  </div>
</template>


<script>
  import { mapMutations, mapGetters } from 'vuex'

export default {
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("storedata") ) {
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("storedata"))))
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
      sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
    });
    // 兼容iphone手机
    window.addEventListener("pagehide",()=>{
      sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
    });
  },
  data () {
    return {
      changeName:''
    }
  },
  computed:{  // 计算器
      frommatterName(){
        let postfix = '';
        if(this.$store.state.name === '张三'){
            postfix = '你是最棒的';
        }
        return this.$store.state.name + postfix;
      }
  },
  methods:{
    ...mapMutations([
      // 将 this.chanageNameToZhangsan 映射 this.$store.commit('chanageNameToZhangsan'）
      'chanageNameToZhangsan',
      'chanageNameToParam'
    ]
    ),
    ...mapGetters([
      'formatterName',
      'customFormatterName'
    ]
    ),
    setNameDefault(){
      // this.$store.commit('chanageNameToZhangsan');
      this.chanageNameToZhangsan();
    },
    setName(){
      console.log(this.changeName);
      // 1.负载提交，负载可以传一个值，但大多数情况下是对象的形式
      this.$store.commit('chanageNameToParam',{
        name:this.changeName
      });

      // 2.对象提交
      this.$store.commit({
        type:'chanageNameToParam', //固定
        name:this.changeName
      })

    },
    setNameDefaultAsync(){
      // 异步
      this.$store.dispatch('changeNameAsync',{
        name:this.changeName
      })
    },
    setNameAsync(){
      // 1.载荷 载荷可以传一个值，但大多数情况下是对象的形式
      // this.$store.dispatch('changeNameToParamAsync',{
      //   name:this.name
      // })

      // 2. 对象
      this.$store.dispatch({
        type:'changeNameToParamAsync',
        name:this.changeName
      })
    }

  },
}
</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>