vuex

1.config index.js下面的跨域代理设置： proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: true, pathRewrite: { '^/api': 'http://xxx' } }, }, 2.http.js（封装axios） import Vue from 'vue' import axios from 'axios' import QS from 'qs' //视情况用于不用; import { Loading, Message } from 'element-ui'; import store from '../store/index' let loading //定义loading变量 function startLoading() { //使用Element loading-start 方法 loading = Loading.service({ lock: true, text: '努力加载中……', background: 'rgba(0, 0, 0, 0.5)' }) } function endLoading() { //使用Element loading-close 方法 loading.close() } //那么

vuex介绍 Vuex 是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 应用场景 当应用遇到多个组件共享状态的时候 vuex和本地存储的区别 vuex可以实时改变状态值的状态，而本地存储不行 vuex刷新页面后状态值会消失，而本地存储不会消失 vuex的使用 1.安装vuex npm install vuex --save 2.src目录下新建store 3.在index.js引用vuex，并创建一个count初始值为1 4.在main.js上使用vuex 5.测试页面拿count值 < h1 > count:{{$store.state.count}} </ h1 > vuex核心(state) state vuex使用单一状态树，用一个对象包含了全部应用层级状态。 展示vuex状态，由于vuex的状态存储是响应式的，所以从store实例中获取状态最简单的方法就是在计算属性中返回某个状态： < template > < div > < h1 > { { count } } < / h1 > < / div > < / template > < script > export default { computed : { count ( ) { return this . $store

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性： import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } 如果你想将一个 getter 属性另取一个名字，使用对象形式： mapGetters({ // 映射 `this.doneCount` 为 `store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) 扩展：ES6展开运算符 定义： .展开运算符允许一个表达式在某处展开。 使用场景 　　1.展开函数在多个参数的地方使用 。 意指用于函数传参 　　2.多个元素的地方使用， 意指用于数组字面量 　　3.多个边框的地方使用，意指用于解构赋值 注意事项 　　展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。 　　iterables的实现是依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator

Vuex中actions异步修改状态 actions与mutations作用类似，都是可以对状态进行修改。不同的是actions是异步操作的。 actions是可以调用Mutations里的方法的。 例子： 在实现点击按钮进行数值相加或相减的功能时，利用异步方法进行操作。 在 src/vuex/store.js 文件中定义actions对象： const actions = { addActions ( context ) { context . commit ( 'add' , 10 ) //调用mutations中的方法 } , reduceActions ( { commit } ) { commit ( 'reduce' ) ; } } 注意：在actions对象中声明了 addActions 和 reduceActions 方法，利用commit调用 mutations 里面的 add 以及 reduce 方法。 context ：上下文对象 {commit} ：直接把commit对象传递过来 同时在 store.js 文件中将 actions 对象进行暴露 export default new Vuex . Store ( { state , mutations , getters , actions } ) 在store.js文件中定义好actions对象后

.1.vuex工作流程图：vuex旨在用于没有任何关系的组件之间共享数据或传值。 2. 这图的执行顺序是这样的： 1、组件(Vue Component)通过Dispatch触发Actions里面的动作； 2、Actions通过Commit提交Mutations 3、Mutations注册事件，通过这些事件来改变State的状态 4、最后State状态改变完后渲染到另一个子组件上 在执行之前，首先要搭建框架，创建store文件夹，子文件有index.js,actions.js和mutation.js, index.js作为入口，分别import（引入）actions.js和mutation.js，并定义一个state,用于存储组件之间共享的数据。最后，index.js需要引入到根入口main.js中去。 3.我们知道vuex的作用就是组件之间共享数据，那么，调用派发方法dispatch('方法名'，'值')的组件就是要向其他组件传递数据的起始组件，最后渲染的组件就是接收这个共享数据的组件。例如在登录页面的用户名username,最后要渲染到NavHeader组件当中去，就要把login中获取的username保存到vuex中去，在NavHeader组件通过$store.state.username来获取。 来源： https://www.cnblogs.com/panzai/p

一、Vuex演示（mutations同步方法） 通过const state定义变量方式，在new Vuex.Store是引用的写法 1、main.js //sotre中的变量为所有组件共享变量,即全局变量 import Vue from 'vue';//引用vue import Vuex from 'vuex';//引用vuex Vue.use(Vuex);//使用vuex //一、格式 /*const store = new Vuex.Store(); export default store;*/ //////////////////////////////////////////////////////////////////////////////////// //2、示例 // 定义数据 // state在vuex中是用于储存数据的 const state={ name : 100 } // 定义方法 mutation同步,因为能改变state的方法是mutations // mutations 里面方的是方法，主要用于改变state中的数据源 const mutations ={ addNumber(){ state.name+=100 }, reduceNumber(){ state.name+=100 }, }, //定义方法 actions异步 使用场景

引入Vuex（前提是已经用Vue脚手架工具构建好项目） 1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。 npm install vuex --save 要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。 2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。 import Vue from 'vue'; import Vuex from 'vuex'; 3、使用我们vuex，引入之后用Vue.use进行引用。 Vue.use(Vuex); 通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。 4、在main.js 中引入新建的vuex文件 import storeConfig from './vuex/store' 5、再然后 , 在实例化 Vue对象时加入 store 对象 : new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } }) 初出茅庐 来个Demo 1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。 const state = { count:1