一、废话不多说,直接上代码
看代码前先扫一眼文件结构:
二、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)
}
}
}