首先：Vuex是什么？
有关于Vuex，官网是这样定义的：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我是这么认为的：Vuex是为了解决多个组件共享状态而存在的。他能够有效的解决兄弟组件，父子组件，爷孙组件的传值。他将组件的共享状态抽取出来，以一个全局单例模式管理。
Vuex有以下5个重要属性：
1、State
单一状态树，每个应用将仅仅包含一个 store 实例。
2、Getter
可以认为是 store 的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
3、Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
4、Action
类似于 mutation，在于Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作
5、Module
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。模块内部的 action、mutation 和 getter 是注册在全局命名空间的。
1、不使用Module开发
- 文件存放
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── state.js # 跟级别的 state
├── getters.js # 跟级别的 getter
└── mutations.js # 根级别的 mutation
- index.js存放的内容
import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
vue.use(vuex);
export default new vuex.Store({
state,
getters,
mutations
});
- state.js存放的内容
const state = {
name: 'jwl',
age: 24
};
export default state;
- getters.js存放的内容
export const name = (state) => {
return state.name;
}
export const age = (state) => {
return state.age
}
export const other = (state) => {
return `My name is ${state.name}, I am ${state.age}.`;
}
- mutations.js存放的内容
export default {
SET_NAME(state, name) {
state.name = name;
},
SET_AGE(state, age) {
state.age = age;
}
};
- main.js存放的内容
import App from './App.vue';
import Vue from 'vue';
import router from './router/index.js'
import vuex from 'vuex'
import store from './store'
Vue.use(vuex);
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
- 在组件中使用
<template>
<div>
姓名 {{name}}
<br>
年龄 {{age}}
<br>
{{other}}
<input @click="changeName" type="button" value='改变名字'>
</div>
</template>
<script>
import { mapGetters, mapMutations ,mapState} from "vuex";
export default {
components: {},
computed: {
...mapGetters(["name", "age", "other"])
//也可以用这个，但mapGetters要强大
//...mapState(["name", "age", "other"])
},
created() {},
methods: {
...mapMutations({
setName: "SET_NAME",
setAge: "SET_AGE"
}),
changeName() {
this.setName("jiawan");
}
}
};
</script>
2、使用Module开发
- 文件存放
└── store
├── index.js # 我们组装模块并导出 store 的地方
└── modules
├── demo1.js # 模块1
└── demo2.js # 模块2
- index.js存放的内容
import vue from 'vue';
import vuex from 'vuex';
import demo1 from './modules/demo1.js';
vue.use(vuex);
export default new vuex.Store({
modules: {
demo1
}
});
- demo1.js存放的内容
const demo1 = {
state: {
names: `demo1`
},
mutations: {
change2(state, va) {
state.names = va.new;
}
},
getters: {
names(state, getters, rootState) {
return state.names + 'hhhhh'
}
}
}
export default demo1;
- main.js存放的内容不变
- 在组件中使用
<template>
<div>
<br>
//state内容，也可以在计算属性里面
{{$store.state.demo1.names}}
<br>
{{demo1name}}
<input @click="changeDemo1Name" type="button" value='改变demo1名字'>
</div>
</template>
<script>
export default {
components: {
},
computed: {
//getters内容
demo1name() {
return this.$store.getters.names;
}
},
created() {},
methods: {
changeDemo1Name() {
this.$store.commit("change2", {
new: "修改了修改了..."
});
}
}
};
</script>
