(一)第一个 Vuex 示例
示例 第一个 Vuex
2023-06-13 09:17:09 时间
第一个 Vuex
示例
一、安装 Vuex
二、main.js
导入配置 vuex
import { createApp } from "vue";
import { createStore } from "vuex";
import App from "./App.vue";
// 这里是状态管理
const store = createStore({
// 把 state 当成 data
state() {
return {
color: [100, 100, 100],
};
},
// 修改 state 把 mutations 当成 methods 里面是一个一个的方法
mutations: {
// 默认接收一个参数 state 参数,他是上面的 state 参数
randomColor(state) {
state.color = [
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
];
},
},
});
const app = createApp(App);
// 把state 添加到实例当中
app.use(store);
app.mount("#app");
三、访问全局 state
- 使用
this.$store.state.xxx
来访问
computed: {
// 模板 或者样式中通过 bgColor 来获取颜色
bgColor() {
const colors = this.$store.state.color
return `rgb(${colors.join(", ")})`
}
}
.app{
whidth: 100vw;
height: 100vh;
display: grid;
place-items: center;
// 使用计算属性中计算出来的颜色
background-color: v-bind(bgColor);
}
四、修改 state
数据
- 使用
this.$store.commit("mutations中定义的函数")
来修改
methods: {
changeColor() {
// 调用 mutations 中的方法来修改 state
this.$store.commit("randomColor");
},
}
相关文章
- C++多态之析构和纯虚析构分析与示例
- 编写第一个 C++ 程序:Hello World 示例
- 【数据挖掘】贝叶斯公式应用 拼写纠正示例分析 ( 先验概率 | 似然概率 | 后验概率 )
- SqlServer中tempdb的日志机制原理解析及示例分享
- jdbc中自带MySQL 连接池实践示例
- 选择屏幕程序示例详解编程语言
- MySQL查询语句的排序示例(mysql查询语句排序)
- nodejs实用示例缩址还原
- Java自定义错误类示例代码
- java解析xml之dom4j解析xml示例分享
- java的前期绑定和后期绑定使用示例
- ajax实现输入框文字改变展示下拉列表的效果示例
- java创建excel示例(jxl使用方法)
- zf框架的数据库追踪器使用示例
- jquery的each方法使用示例分享
- mysql存储过程输入输出参数示例