vuex的特点：

多组件共享状态: 多个组件使用同一个数据
任何一个组件发生改变, 其他组件也要跟着发生相应的变化

安装vuex npm install vuex：

创建实例：

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)const state = {name : '张三',age  : 18
}
const mutations = {// 更改 Vuex 的 store 中的状态的唯一方法是提交 mutationchangeName (state, params) {state.name = params.name},changeAge (state, params) {state.age = params.age}
}
const actions = {// Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutationactionsChangeAge ( context, params) {context.commit('changeAge', params)}
}
const getters = {// Getter 接受 state 作为其第一个参数doubleAge (state) {return state.age * 2}// 也可以使用箭头函数的简写// doubleAge: state => state.age * 2
}const store = new Vuex.Store({ // 创建全局状态管理的实例state, // 共同维护的全局状态mutations, // 处理数据的唯一途径, 修改state的数据只能通过mutationsactions, // 数据的异步操作处理getters // 获取数据并渲染
})// 导出并在main.js里面引用&注册
export default store# 引入文件：
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = falsenew Vue({store, // 全局使用render: h => h(App),
}).$mount('#app')# 模板：<template><div><h2>组件</h2><!-- 组件可以通过this.$store.state 获取store中的数据 -->name: {{ this.$store.state.name }} <br>age: {{ this.$store.state.age }}<button @click="change">修改年龄</button></div>
</template>
<script>
export default {methods: {change () {// 此方法一般用于网络请求// dispatch: 调用actions里面的方法, 再让actions里面的方法// 通过commit 调用mutations里面的方法this.$store.dispatch('actionsChangeAge', { age: 120 })},changeName () {// 通过$store.commit直接调用store实例中mutation里面的方法// 参数1: 要调用mutation里面的方法名, 参数2: 要传输的数据this.$store.commit('changeName', { name: '宝宝', age: 19})}}
}
</script>
----------------------------------------------------------------// 以载荷形式
store.commit('increment'，{amount: 10   //这是额外的参数
})// 或者使用对象风格的提交方式
store.commit({type: 'increment',amount: 10   //这是额外的参数
})dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据
this.$store.dispatch('isLogin', true);commit：同步操作，数据提交至 mutations ，可用于读取用户信息写到缓存里
this.$store.commit('loginStatus', 1);state    存放基本数据
getters 从state基本数据派生出的数据(类似vue中的computed)
mutations   Store中更改state数据状态的唯一途径
actions 通过dispatch触发actions, actions在通过commit触发mutations。一般用于处理异步操作
modules 模块化Vuex

VueX的store的简单使用心结相关推荐

vuex结合php,vuex中store的使用介绍（附实例）
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
Vuex的store中的Module
Vuex的store中的Module 1.单一状态树: 什么是单一状态树呢?单一状态树可以简单得理解成整个vuex中只有一个store对象. 这是官方对单一状态树的解释: Vuex 使用单一状态树-- ...
vuex中store 的mutation
vuex中store 的mutation 1.mutation 官方解释mutation: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation ...
Vuex初级入门及简单案例
1.为什么要使用Vuex? (1)方便所有组件共享信息,方便不同组件共享信息. (2)某个组件需要修改状态和需求. 2.状态有哪些? (1)组件内部定义的data状态(通过组件内部修改) (2)组件外 ...
Vuex配置及Vuex原理图分析，简单明了，一遍就明白
配置Vuex npm i vuex@3 或npm i vue@4 因为是Vue2 使用的是Vuex3 版本 Vue3使用的是Vuex4版本根据使用的脚手架而定然后导入Vuex 代码如下专门设置一 ...
vue项目将token存在（vuex）store和localstorage中
文章目录一.准备工作和token 1.准备工作 2.介绍token用法二.创建storage,store,request 1.src目录: 2.封装storage(可选) 3.创建store 4. ...
使用vuejs 2.x (不是nuxt) 做个demo: 使用 vuex, router ( store, action , mutation)
使用命令创建项目根据图片提示选择需要的内容,选择vuex router 按空格进行多选 vue create vuex1 cd vuex1 yarn serve 假设,我们有两个页面: " ...
闲云旅游项目开发-（第二篇：实现登录功能，使用vuex的store管理数据）
目录一登录注册页布局二登录功能 1.思路 2.实现步骤 2.1 新建登录表单组件 2.2 表单数据绑定及验证 2.3 登录接口 3.总结三使用vuex/store管理数据 1.思路 2. ...
解决vuex中store保存数据，刷新页面会清空得问题
1.在App.vue下加入 mounted() {window.addEventListener("unload", this.saveState);},methods: {sav ...

VueX的store的简单使用心结

vuex的特点：

安装vuex npm install vuex：

VueX的store的简单使用心结相关推荐

最新文章

热门文章