Store仓库中的属性
首先此实例中的代码本人写在store仓库中index.js的子模块about中。
本实例的目录结构是这样的（例子中只用到about，只出现有关about的代码）：
实例学习开始前准备
前提是已经安装了vuex插件，还要在main.js中引入仓库。
安装vuex插件
npm install vuex --save
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 './store'//引入store仓库
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,//创建store实例
components: { App },
template: '<App/>'
})
modules
子模块，作用就是分开写的页面，可以通过子模块引用到index中使用。
import about from './modules/about'
modules: {
about
}
index.js完整代码
引入vuex的相关配置。
import Vue from 'vue'
import Vuex from 'vuex'
import about from './modules/about'
Vue.use(Vuex) // 显式地通过 Vue.use() 来安装 Vuex
const store = new Vuex.Store({
state:{
},
getters:{
},
mutations:{
},
actions:{
},
modules: {
about,
}
});
export default store;
1、state
定义状态，基本数据，唯一数据源。
state:{
count:5,
obj:{}
}
2、getters
相当于state的计算属性，对state中数据进行计算。
getters:{
newCount:state => state.count * 3
}
3、mutations
同步更改state中数据的方法。
mutations:{
increment(state){//count的值+1
state.count++
},
getParam(state,Object){//修改state中obj中的数据值
state.obj = Object
}
}
4、actions
提交mutation触发方法，管理异步操作。
actions:{//接收dispatch传递过来的方法和参数
getParamSync(context,Object){//处理异步操作
setTimeout(()=>{//通过commit提交getParam
context.commit('getParam',Object)
},3000)
}
}
about.js完整代码
export default {
// 定义状态
state: {
count: 5,
obj:{},
},
getters:{
newCount:state => state.count * 3,
},
mutations: {
increment (state) { // 增一
state.count++
},
getParam (state,Object) {
//修改state中的数据
state.obj= Object
}
},
//接受dispatch传递过来的方法和参数
actions: {
getParamSync (context,Object) {
//处理异步操作
setTimeout(()=>{
//通过commit提交一个名为getParam的mutation
//action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
context.commit('getParam',Object)
},3000)
},
}
}
.Vue文件中的属性
5、method
写业务逻辑，方法的调用。
methods:{
increment(){//提交mutations中的increment方法
this.$store.commit('increment')
},
getVal(){
let name= 'xia';
let age= '26';
let sex= 'man';
//通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
this.$store.dispatch('getParamSync',{name,age,sex})
}
}
6、computed
计算属性，其中定义的方法虽然是方法，但是当作属性使用。引用一些经过操作的数据。
computed:{
count(){
return this.$store.state.about.count;
},
obj(){
return this.$store.state.about.obj;
},
newCount(){
return this.$store.getters.newCount;
}
}
7、调用
<div>
<h3>about.js中count的值：{{count}}</h3>
<button @click="increment">about加1</button>
<h3>newCount的值：{{newCount}}</h3>
<h3>about.js中obj的值：{{obj}}</h3>
<button @click="getVal">点击等待3秒获取参数</button>
</div>
about.vue完整代码
<template>
<div>
<h3>about.js中count的值：{{count}}</h3>
<button @click="increment">about加1</button>
<h3>newCount的值：{{newCount}}</h3>
<h3>about.js中obj的值：{{obj}}</h3>
<button @click="getVal">点击等待3秒获取参数</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$store.commit('increment')
},
getVal() {
let name= 'xia';
let age= '26';
let sex= 'man';
//通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
this.$store.dispatch('getParamSync',{name,age,sex})
}
},
computed: {
newCount(){
return this.$store.getters.newCount;
},
count(){
return this.$store.state.about.count;
},
obj(){
return this.$store.state.about.obj;
}
}
}
</script>
<style scoped>
</style>
总结
一开始不懂没关系，脑袋晕乎乎的很正常，这个vuex状态管理模式就是很绕，跟着流程看下来，具体操作一遍，搞清楚前后关系，其实也不难，一步一步跟着操作，学习，一定要专注与坚持。
不怕慢，就怕站。
