<十>vuex 状态管理
作者:互联网
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简单的说就是多个组件之间共享的数据的存储的地方。
Vuex由三部分组成。
- Actions负责数据的处理,
- Mutations负责数据修改,
- State负责数据存储。
1、安装vuex,安装完成查看node_Modules有没有vuex文件
npm install vuex --save
2、在src中创建一个store的文件夹用来存放vuex的文件,在创建一个index.js作为vuex的配置文件,内容如下:
import Vue from 'vue' import Vuex from 'vuex' //声明使用vuex Vue.use(Vuex) // 新建一个store export default new Vuex.Store({ state: { // state用来存储数据, testInfo: 'hello' //数据以键值对形式存储 } })
3、main.js引入vuex.
import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
4、上面state存储了一个数据进去,使用this.$store.state.数据名,来获取数据。
换掉默认路由的组件为12345.vue
{ path: '/', name: '12345', component: a12345 },
根组件内容恢复成初始
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template>
这样就去除了路由相关代码的影响。修改12345组件的内容,
<template> <div class='hello'>{{this.$store.state.testInfo}}</div> </template> <script> export default { name: '12345', data () { } }
运行看,hello就是我们定义的testInfo的值。
5、修改vuex参数有两种方式,一种是actions->mutations->state;一种是mutations->state。
action和mutations的区别:
二者扮演角色的不同:Mutation:专注于修改State,理论上是修改State的唯一途径。Action:业务代码、异步请求。
二者有不同的限制:Mutation:必须同步执行。Action:可以异步,但不能直接操作State。
从上面二者的区别也可以看出来了state,Mutation,Action实际上有不同的分工,那么为了便于管理,可以在文件上给与解耦。
那么就可以这么分层了:index.js只作vuex的创建和state的声明,新建一个mutation.js和action.js分别存放他们相应的代码。
给mutatioin.js添加更改testInfo.的代码
export default { changeinfo (state, arg) { state.testInfo = arg } }
给action.js添加更改testInfo.的代码
export default { changeinfo (context, arg) { context.commit('changeinfo', arg) } }
在store/index.js种给vuex配置mutatioin和action
import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutation' import actions from './action' Vue.use(Vuex) export default new Vuex.Store({ state: { testInfo: 'hello' }, actions: actions, mutations: mutations })
修改12345.vue,添加一个button点击改变文字
<template> <div> <button @click="changeInfo">点击</button> <div class='hello'>{{this.$store.state.testInfo}}</div> </div> </template> <script> export default { name: '12345', methods: { changeInfo () { this.$store.dispatch('changeinfo', 'hello change') } } } </script>
最后运行:
标签:testInfo,状态,管理,js,state,import,vuex,store 来源: https://www.cnblogs.com/choii/p/15672911.html