vuex:简单易上手版本

一、废话不多说，直接上代码

看代码前先扫一眼文件结构：

二、store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import  state from './state.js';
// import * as  A from ".././wenjian.js"
// 会将 wenjian 中所有 export 导出的内容组合成一个对象A返回;
import * as getters from './getter.js';
import mutations from './mutations.js';
import  actions from './action.js';
Vue.use(Vuex);
const store = new Vuex.Store({
  getters,
  state,
  mutations,
  actions,
});
export default store;

三、store/state.js

//核心概念1: State
//就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.
export default {
  username: "我爱蓝色的猪",
  vuecommit:"",
  vuedispatch:"",
  actiondispatch:"",
};

三、store/getter.js

//核心概念2: Getters
//看做是所有组件的computed属性, 也就是计算属性.
//也可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
export const getUserName = state=>{
    return state.username+"getter";
};
export const countAge = state => {
  let resultAgeList = state.ageList.map(age => {
    return age + 10;
  });
  return resultAgeList;
};

四、store/mutations.js

//核心概念3: Mutations
//mutations:回调函数,用来操作state中的数据，是它的methods,该函数名官方规定叫type,
//  第一个参数是state, 第二参数是payload, 也就是自定义的参数.
import * as types from "./constant.js";
const matutaions = {
    [types.SET_USERNAME]:(state,payload)=>{
	 	state.username=payload;
    },
  	[types.GET_CONSTANT]:(state,payload)=>{
		state.constant=payload;
	},
	[types.GET_VUECOMMIT]:(state,payload)=>{
		state.vuecommit=payload;
	},
	[types.GET_VUEDISPATCH]:(state,payload)=>{
		state.vuedispatch=payload;
	},
};
export default matutaions;

五、store/action.js

//核心概念4: Actions
//actions 类似于 mutations,但有以下几点不同:
//-actions提交的是mutations而不是直接变更状态；
//-actions中可以包含异步操作, mutations中绝对不允许出现异步;
//-actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
// 可以在commit的时候异步，也可以在组件内dispatch的时候异步；
import * as types from "./constant.js";
const actions = {
  [types.GET_VUEDISPATCH](context, data) {
      context.commit(types.GET_VUEDISPATCH, data);
  },
  [types.GET_CONSTANT]({commit}, data) {
    setTimeout(() => {
      commit(types.GET_CONSTANT, "常量数据1");
    }, 5000);
  }
};
export default actions;

六、常量 constant.js

// 字符串映射
export const SET_USERNAME = "SET_USERNAME"; //用户名
export const GET_VUECOMMIT = "GET_VUECOMMIT"; //vue_commit
export const GET_VUEDISPATCH = "GET_VUEDISPATCH"; //vue_dispatch
export const GET_CONSTANT= "GET_CONSTANT"; //获取常量

七、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 router from "./router";
import App from "./App.vue";
// vuex的使用
import store from "./store/index.js";
import * as types from "./store/constant.js";
Vue.prototype.$types = types;
/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: "<App/>"
});

八、vue组件中使用&效果图

   <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <h4>vuex数据读取</h4>
          <ul style="text-align:left;">
            <li>方法一：直接读取state中的数据：{{username}}；</li>
            <li>方法二：将state中的数据暴露到this.$store.getters对象中：{{getUserName}}</li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <h4>vuex数据存储</h4>
          <ul style="text-align:left;">
            <li>
              方法一：vue_commit:{{$store.state.vuecommit}}
              <br />
              <el-button
                plain
                type="success"
                size="mini"
                @click="getUserName1"
              >异步存值commit(vue组件存值)（{{time1}}s）</el-button>
            </li>
            <li>
              方法二: vue_dispatch：{{$store.state.vuedispatch}}
              <br />
              <el-button
                plain
                type="warning"
                size="mini"
                @click="getUserName2"
              >异步存值dispatch(vue组件存值)（{{time2}}s）</el-button>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <ul>
            <li>
              方法三: Action.js： {{$store.state.constant}}
              <br />
              <el-button plain type="warning" size="mini">异步存值(action.js组件存值)</el-button>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

export default {
  data() {
    return 
      time1: 5,
      time2: 5
    }
  },
  computed: {
    username() {
      //不建议
      return this.$store.state.username
    },
    getUserName() {
      return this.$store.getters.getUserName
    }
  },
  watch: {},
  created() {
    this.$store.dispatch(this.$types.GET_CONSTANT)
  },
  methods: {
    getUserName1() {
      // 异步存值:commit
      //计时器
      let timer = setInterval(() => {
        if (this.time1 >= 0) {
          this.time1--
        }
        if (this.time1 == 0) {
          clearInterval(timer)
          this.$store.commit(this.$types.GET_VUECOMMIT, '小飞侠')
        }
      }, 1000)
    },
    getUserName2() {
      // 异步存值:dispatch
      //计时器
      let timer = setInterval(() => {
        if (this.time2 >= 0) {
          this.time2--
        }
        if (this.time2 == 0) {
          clearInterval(timer)
          this.$store.dispatch(this.$types.GET_VUEDISPATCH, '常量数据2')
        }
      }, 1000)
    }
  }
}