Vuex的简单例子
不包含modules部分,待更新..
目录解构:
App.vue
<template>
<div>
<Count></Count>
</div>
</template>
<script>
import Count from "@/components/count.vue";
export default {
components: { Count }
};
</script>
<style>
</style>
count.vue
<template>
<div>
<h3>{{count}}</h3>
<p>
<button @click="add(10)">add(10)</button>
<button @click="replaceAdd(10)">replaceAdd(10)</button>
<button @click="reduce">-</button>
<button @click="add2">add2</button>
<button @click="actionReduce">actionReduce-</button>
<button @click="actionReduce2">actionReduce2-</button>
</p>
<hr>
<p>
设置show:
<button @click="showh3">true</button>
<button @click="hiddenh3">false</button>
</p>
<h3 v-if="show">Vuex状态show控制是否显示</h3>
</div>
</template>
<script>
// 引入辅助函数
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
// 数据
data() {
return {};
},
// 计算属性 每次值发生改变则重新计算 并更新DOM
computed: {
// 扩展运算符 引入state值
...mapState(["count", "show"]) // 直接取得`state`
// 扩展运算符 引入经过过滤器的 `state`, 也可以映射改个名字 `...mapGetters({name:"count"})`, 例如`methods`的`replaceAdd()`
// ...mapGetters(["count", "show"]) // 通过 `getters` 取得 `state`
},
//方法
methods: {
// 扩展运算符 引入方法
//使用 `this.$store.commit('xxx','param')` 或者 映射为methods
...mapMutations(["add", "reduce"]),
...mapMutations({
replaceAdd: "add" // 将 `this.replaceAdd()` 映射为 `this.$store.commit('increment')`
// amount: 10 假如有第二个参数
}),
// 扩展运算符 引入行动
// 异步执行 每个方法返回Promise
// 使用this.$store.dispatch("xxx", "param"); 或者 映射为methods
...mapActions(["actionReduce2", "actionReduce"]), // 转为两个方法`actionReduce2`和`actionReduce`
// 自定义局部Mutations方法(操作 `state` 的方法)
// `this.$store.state` -> 不加$不好用
add2() {
// count += 2
this.$store.state.count += 2;
},
// 设置全局状态show为true
showh3() {
this.$store.state.show = true;
},
// 设置全局状态show为false
hiddenh3() {
this.$store.state.show = false;
}
}
};
</script>
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
/**
* 定义状态 -> Vuex store 实例的根 state 对象
* 取状态:
* 1.通过vuex引入mapState
* import { mapState } from "vuex";
*
* 2.通过mapState引入两个状态
* computed中-> ...mapState(["count","show"])
*/
const state = {
count: 0,
show: true
};
/**
* 定义方法(突变)
* 第一个值为state 第二个参数payload荷载(可选)
* mutation 都是同步事务 一个一个执行
* 调用方法: ...mapMutations(["add", "reduce"])
* 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation??????
*/
const mutations = {
add(state, num) {
state.count += num;
},
reduce(state) {
state.count--;
}
};
/**
* 定义动作
* @param:context 包含以下属性
* state, // 等同于 `store.state`,若在模块中则为局部状态
* rootState, // 等同于 `store.state`,只存在于模块中
* commit, // 等同于 `store.commit`
* dispatch, // 等同于 `store.dispatch`
* getters, // 等同于 `store.getters`
* rootGetters // 等同于 `store.getters`,只存在于模块中
* @param:payload 荷载(可选)
* 方法dispatch返回Promise
* async / await???https://tc39.github.io/ecmascript-asyncawait/
*/
const actions = {
actionReduce(context) {
context.commit("reduce");
},
// `ES2015`写法
actionReduce2({ commit }) {
commit("reduce");
}
};
/**
* 定义Getters(特定的全局过滤器)
* 通过store.getters.count方式获取每次都会加1000
*/
const getters = {
count: state => state.count,
show: state => state.show,
//使用其他getters作为第二个参数
count2: (state, count) => count
// 过滤 store.getters.doneTodes 就是过滤后的结果
// doneTodos: state => {
// return state.todos.filter(todo => todo.done);
// }
//寻找 store.getters.getTodoById(2) 返回id为2的结果
// getTodoById: (state) => (id) => {
// return state.todos.find(todo => todo.id === id)
// }
};
export default new Vuex.Store({
state,
mutations,
getters,
actions
});
main.js
import Vue from "vue";
import App from "./App.vue";
import store from "./vuex/store";
import Vuex from "vuex";
Vue.use(Vuex);
Vue.config.productionTip = false;
new Vue({
store, //从跟组件注入`Vuex.Store`
render: h => h(App)
}).$mount("#app");