标签：vuex action 页面 跳转 rom 驱动 npm img his
1.Vuex概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
这个状态自管理应用包含以下几个部分：
以下是一个表示“单向数据流”理念的极简示意：
Vuex基本思想
2. 引入vuex
npm install vuex --save
3.在src/store文件下下创建一个store.js
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) export default new Vuex.Store({
state: { count: 0, apiDocInfo: { operationId: "" } }, mutations: { //设置apiInfo的值 setApiInfo(state, apiInfo) { state.apiDocInfo = apiInfo }, increment: state => state.count++, decrement: state => state.count--, } })
3.在 main.js中添加
//Vuex import store from ‘./store/store‘ // 引入store 对象 new Vue({ el: ‘#app‘, store,// 注入到根实例中 router, components: { App }, template: ‘<App/>‘ })
4.SetValue
queryApiInfo(){ let apiDocInfo={ operationId:operationId }; //直接设置 // this.$store.state.apiDocInfo=apiDocInfo; //commit设置 this.$store.commit(‘setApiInfo‘, apiDocInfo);// SET_ORDER为order值的设置方法的方法名 },
5.获取值
<template>
<div >
<span>{{count}}</span>
<span>{{apiDocInfo}}</span>
</div>
</template>
<script>
import {mapState} from ‘vuex‘;
export default {
computed:mapState({
count:state => state.count,
apiDocInfo :state => state.apiDocInfo,
}),
}
</script>
标签：vuex action 页面 跳转 rom 驱动 npm img his
原文地址：https://www.cnblogs.com/feng123/p/9505404.html
