vuex

参考博客： npm 包管理器的常用命令 常用命令 // npm包安装路径 npm root // 全局npm包安装路径 npm root -g // 某个包对于各种包的依赖关系 npm view 模块名 dependencies // 包的源文件地址 npm view 模块名 repository.url // 当前模块依赖的node最低版本号 npm view 模块名 engines // 模块的本地安装版本号 npm list 模块名 version // 模块的最新版本号 npm view 模块名 version // 模块的历史版本 npm view 模块名 versions // 一个模块的所有信息 npm view 模块名 // 更新模块 npm update 模块名 // 指定版本号更新 npm update 模块名@版本号 // 安装模块（默认就是最新版本） npm install 模块名 npm i 模块名 // 安装指定版本号 npm i 模块名@版本号 // 卸载模块 npm uninstall 模块名 npm uni 模块名 npm包的版本号X.Y.Z X：主版本号。只有 更新了不向下兼容的API时 ，修改主版本号 Y：次版本号。当模块 增加了向下兼容的功能时 ，修改次版本号 Z：修订版本号。当模块进行了向下兼容的bug修改后，修改修订版本号 //

Vuex的概念 公共的状态管理模式 一种最好的非父子组件传值的方案 安装 cnpm install vuex -S Vuex中常用的配置项 vuex的基本配置框架 import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); //vue配置 公共的内存空间 const store=new Vuex.Store({ state, actions, mutations, getters, }) export default store; state：存储公共的状态 当组件需要访问state中的数据的时候通过this.$store.state.属性进行访问。 //配置文件中 let state = { //n:10 list : [ ] , inputVal : "" , } //使用时 < input type = "text" : value = "$store.state.inputVal" @input = "handleChange($event)" > actions：用来处理异步数据(当vue中的数据是通过异步获取的时候，那么必须要经历actions这个配置项)， 同步时可直接跳过这步直接使用commit触发mutations中的方法this.$store.commit(“”)

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 参考：[https://www.jianshu.com/p/b22d03dfe006] 以下是可行的 npm install --save axios vue-axios store.js内容如下 以下是可行的 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios); Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { } }) 以上是可行的 1. 安装 Axios 1. 安装 $ npm install axios $ npm install vue-axios 2. 引入 import axios from 'axios' import VueAxios from 'vue-axios' // 通过use方法加载axios插件 Vue.use(VueAxios，axios); 3. 请求 示例 this.$http.post(Url, { page: p }).then((res) => {

　　Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 　　状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。 　　使用Vue开发项目时，通常我们就会遇到如下几种棘手的问题： 　　 问题1：通过路由传递参数，我们会采用params或者query形式，但这两种方式都会在URL上做手脚，如果传递的参数过多，会导致400 Bad Request（如：点击表格某行，携带行数据跳转到新页面进行查看）。 　　问题2：兄弟组件传值 　　问题3：多处地方使用同一数据，为节省重复请求（最为常见） 　　业务场景： 　　从A页面携带下钻参数(ID)到B页面，然后B页面获取参数(ID)进行数据请求。由于要下钻的ID过长，受浏览器的URL长度限制问题，我们不能采用常规的prams(xxx.com/B/:ID)或query(xxx.com/B?ID=…)形式传递。可以使用Vuex做中间过渡，跳转前存储ID信息，进入B页面后从Vuex获取ID信息。 　　如果用户在B页面刷新数据，则Vuex的ID状态值会被清空无法获取，这里只能借助localStorage进行持久化进行处理（当然，如果直接使用localstorage进行持久化存储

研究了一段时间的vuex，只是简单地会用，对于里面的一些知识点还是 不太会表达，就目前，先梳理一下自己对vuex中几个主要概念的理解 vuex一个专为 Vue.js应用程序开发的状态管理模式，主要是为了解决组 件间的通信，方便数据的共用，如果不使用vuex，数据之间或许可以 用子组件的传值来解决，但是比较麻烦。 概念的理解 state： 状态管理 ，储存初始化数据 getters:相当于store的计算属性,对State 里面的数据二次处理 mutations:改变state状态的函数,对数据进行计算的方法全部写在里面, 每个mutation都有一个事件类型和一个回调函数,回调函数必须是同步 的，通过this.$store.commit('decrement')来触发 actions：主要是commit mutations,而不是用于直接更变状态，是异步 操作，通过this.$store.dispatch('decrement')来触发 mapState 辅助函数，把全局的 state映射到当前组件的 computed 计算 属性中，返回的是一个对象 之所以使用mapstate：当一个组件需要获取多个状态时候，将这些状 态都声明为计算属性会有些重复和冗余。 mapGetters：把全局的getters映射到当前组件的 computed 计算属性 中，返回的是一个数组

一、概览 1、Vuex是什么 专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理） 采用集中式存储管理应用的所有组件的状态 以相应的规则保证状态以一种可预测的方式发生变化 2、状态 组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 ) 应用级别状态：多个组件共用的状态（将这个状态放入vuex中进行管理） 3、什么情况下使用Vuex 多个视图（组件）依赖同一状态 来自不同视图（组件）的行为需要变更同一状态 二、Vuex核心概念 1、store：类似容器，包含应用的大部分状态 一个页面只能有一个容器 状态存储是响应式的 不能直接改变store中的状态，唯一途径显示地提交mutations 在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值；如果要再次请求异步，那么就是dispatch一个actions 2、State：包含所有应用级别状态的对象 3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed 4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions 5、Actions：包含异步操作、提交mutations改变状态

1.什么是vuex？ 　　官方的解释：Vuex 是一个专为 Vue .js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 2.为什么需要用到状态管理？ 　　在开发中，我们经常会遇到多个组件试图依赖同一个状态，如果没有用到vuex，则需要组件之间来回传递修改值，这样会非常的麻烦，给大家看一个图就明白了。 　　 　　这里根组件main.js，以及后代组件app.vue，hello.vue，home.vue需要共享状态count。当状态count更新时，所有依赖count的组件都必须响应更新,为了实现根组件及后代组件能响应count，需要组件间来回接受传递，会非常的复杂，这个时候就需要要用vuex状态管理，使用了vuex状态管理就方便许多了，看下图： 　　 　　3.store选项： state 　　　　Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。作为一个“唯一数据源”而存在，存放组件中的状态。 getter getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算（可以认为是 store 的计算属性）。 接受 state 作为第一个参数 接受其他 getter 作为第二个参数 mutation 　　　　更改 Vuex 的 store 中的状态的唯一方法是提交