vuex状态管理简单入门

1.安装vuex

npm i --save-dev vuex 复制代码

2.为了方便管理，在src目录下新建文件夹store

新建index.js进行初始化 新建state.js进行数据存储 新建mutations.js保存数据修改的方法 复制代码

3.开始编写配置文件

index.js

import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({// 存储数据state,// 修改方法mutations }) 复制代码

在main.js中引入并实例化

import store from '@/store/index' new Vue({el: '#app',router,// 实例化storestore,render: h => h(App) }) 复制代码

4.到这里vuex已经配置完成，只要在state.js中写入数据即可在项目中引用了

state.js

const state = { //这里以常用的用户id为例，可以是任意你想保存的数据userId: '0123456789' } export default state 复制代码

5.现在你就可以在项目中的任何组件取到用户id，方法如下(关于map的作用就自己查阅资料吧)

import { mapState } from 'vuex' export default {computed: {...mapState({userId: state => state.userId})},// 然后在你需要的地方使用this.userId即可，如created () {console.log(this.userId)} } 复制代码

6.关于修改state中属性的值

还是以用户id为例，每个用户保存的值必然是不同的，这个值需要用mutations中的方法来修改

mutations.js

const mutations = { //save_userId是方法名， userId是传入的修改值save_userId (state, userId) {state.userId = userId} }export default mutations 复制代码

7.在需要保存用户id的地方调用mutations中的方法进行保存

import { mapMutations } from 'vuex' export default { // 引入方法save_userId方法methods: {...mapMutations({save_userId: 'save_userId'})} // 保存或修改数据created () {this.save_userId('987654321')} } 复制代码

8.到这里数据的存储也完成了,取数据只要用第5步的方法即可，vuex的简单使用也不复杂，希望刚入门的小伙伴看完有所收获吧，之后有空在推出与actions相关的部分。

转载于:https://juejin.im/post/5afcb72a6fb9a07aab2a0c3e

总结

以上是生活随笔为你收集整理的vuex状态管理简单入门的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。