Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
下载安装
npm i vuex --S新建文件夹store 与main.js同级 文件夹下新建index.js
index.js写入以下代码
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
// strict: true,// 严格模式
state: {
oneComNumber: 10,
},
// Action支持异步调用Mutation来修改。 处理一些逻辑业务
actions: {
numberAddWait(context, v) { // 上下文和传过来的值
setTimeout(() => {
// context.commit("numberAdd", v)
context.state.oneComNumber += v // 这样也可以改变state里面的值
}, 1000);
},
},
// 用于操作一些数据 （state） 也可进行判断
mutations: {
numberAdd(state, v) {
// if (state.oneComNumber % 2) {
// console.log(4546546546);
// }
state.oneComNumber += v
},
numberMinus(state, v) { // 上下文和传过来的值
state.oneComNumber -= v
},
},
// 计算属性 辅助函数
getters: {
bigOneComNumber(state) {
return state.oneComNumber * 10
}
},
});
单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
export default new Vuex.Store({
// state 定义数据 在组件都能读取得到
state: {
oneComNumber: 10,
},
})store 实例中读取状态最简单的方法就是在计算属性中返回某个状态( )：
computed: {
oneComNumber() {
return this.$store.state.oneComNumber;
},
},然后直接使用即可
<h1>computed里面的值：{{ oneComNumber }}</h1> 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性（展示方法一样）
import { mapState } from "vuex"; // 需要引入
export default {
name: "HelloWorld",
props: {
},
data() {
return {};
},
created() {
console.log(this.$store);
},
computed: {
// oneComNumber() {
// return this.$store.state.oneComNumber;
// },
// 这里是数组形式获取 用于方法名和属性名一样的时候
...mapState(["oneComNumber"]), // 展开运算符写入即可
// 这里是对象形式获取 用于方法名和属性名一样的时候
// ...mapState({'oneComNumber':'oneComNumber'}), // 展开运算符写入即可
},
};Action 类似于 mutation，不同在于：
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters 。
// Action支持异步调用Mutation来修改。 处理一些逻辑业务
actions: {
// 这里 就是等一段时间去执行
numberAddWait(context, v) { // 上下文和传过来的值
setTimeout(() => {
context.commit("numberAdd", v)
}, 1000);
},
},在页面调用时可以直接调用：$store.dispatch('方法名称', 传递的参数)
<button @click="$store.dispatch('numberAddWait', n)">过一会再加</button> 使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
import { mapActions } from "vuex";
export default {
methods: {
...mapActions(["numberAddWait"]),
},
};在相应区域调用相应方法即可
<button @click="numberAddWait(n)">过一会再加</button>更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
// 用于操作一些数据 （state） 也可进行判断
mutations: {
numberAdd(state, v) {
state.oneComNumber += v
},
numberMinus(state, v) { // 上下文和传过来的值
state.oneComNumber -= v
},
},直接调用 通过commit('方法名'，参数)调用
<button @click="$store.commit('numberAdd', n)">+</button>
<button @click="$store.commit('numberMinus', n)">-</button> 使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
<button @click="numberAdd(n)">+</button>
<button @click="numberMinus(n)">-</button>
methods: {
// 与上面Actions magActiions用法一致 也有对象传值方法
...mapMutations(["numberAdd", "numberMinus"]),
},有时候我们需要从 store 中的 state 中派生出一些状态，例如数据进行加工处理 例如放大倍数：这个时候可以在computed里面写计算属性，但是为了方便管理 Vuex提供了‘getter’
// 计算属性 辅助函数
getters: {
bigOneComNumber(state) {
return state.oneComNumber * 10
}
},直接调用 进行显示
<h2>{{ $store.getters.bigOneComNumber }}</h2> mapGetters 辅助函数 <h2>{{ bigOneComNumber }}</h2>
computed: {
...mapGetters(["bigOneComNumber"]),
},由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
主要用于多个文件/多个store
单个文件添加命名空间进行区别
namespaced: true,
例如，新建文件oneCom.js
export default {
namespaced: true, // 空间命名
state: {
oneComNumber: 10,
peoppleList: [
{
id: 1,
name: "张三"
}
],
},
// Action支持异步调用Mutation来修改。 处理一些逻辑业务
actions: {
numberAddWait(context, v) { // 上下文和传过来的值
setTimeout(() => {
context.commit("numberAdd", v)
// context.state.oneComNumber += v
}, 1000);
},
},
// 用于操作一些数据 （state） 也可进行判断
mutations: {
numberAdd(state, v) {
// if (state.oneComNumber % 2) {
// console.log(4546546546);
// }
state.oneComNumber += v
},
numberMinus(state, v) { // 上下文和传过来的值
state.oneComNumber -= v
},
},
// 计算属性 辅助函数
getters: {
bigOneComNumber(state) {
return state.oneComNumber * 10
}
},
}index.js
import Vue from "vue";
import Vuex from "vuex";
import oneCom from './oneCom'
Vue.use(Vuex);
export default new Vuex.Store({
strict: true,// 严格模式
// 多个模块进行管理 管理多个文件
modules: {
oneCom
}
});
页面.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<button @click="numberAdd(n)">+</button>
<button @click="numberMinus(n)">-</button>
<button @click="numberAddWait(n)">过一会再加</button>
<select v-model="n">
<option :value="1">1</option>
<option :value="2">2</option>
<option :value="3">3</option>
</select>
<h2>{{ oneComNumber }}</h2>
</div>
</template>
<script>
import { mapMutations, mapActions, mapState } from "vuex";
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
data() {
return {
n: 1,
};
},
created() {
console.log(this);
},
methods: {
...mapMutations("oneCom", ["numberAdd", "numberMinus"]),
...mapActions("oneCom", ["numberAddWait"]),
},
computed: {
...mapState("oneCom", ["oneComNumber"]),
},
};
</script>