- 安装vuex
npm install vuex --save
- main.js中引入安装
import Vuex from 'vuex'; Vue.use(Vuex);
- 配置vuex(非严格模式下可直接操作state数据,只是无法跟踪数据状态变化)
//Vuex配置 const store = new Vuex.Store({ // state类似vue实例中的data 用来存放数据 state: { // 可以设置一些需要全局使用的数据 username:'zxx' }, // mutations类似vue实例中的methods mutations: { // 用来处理数据 比喻数据删除更新等操作 // 第一个参数state是固定写法 第二个参数表示的是需要修改成的数据 update(state,name){ state.username = name; } } })
- 组件中通过this.$store使用
console.log(this.$store.state.username);
- 调用mutations方法更新数据
// 第一个参数是 mutations 中定义的对应的方法名 第二个参数是需要更新的数据 // 具体更新逻辑在update方法中实现 this.$store.commit('update','lxy');调用update方法更新用户名
- 组件内监视state中的数据更新
import { mapState } from 'vuex'; // mapState可以将vuex实例state中定义的属性 映射成为当前组件中的计算属性 // 同时可以保证在计算属性的方法体中可以使用state中的属性 computed: mapState({ username: state => state.username // username:function(state){return state.username}; })
vuex安装及最基本使用入门(严格模式下)
最新推荐文章于 2024-04-10 15:06:48 发布