用户4948127253262
获得徽章 0
个人认为：vuex就是用来共享数据的一个插件
Vuex的准备工作：
1.npm install vuex --save
2.与main.js同级创建store.js用于管理Vuex import Vue from 'vue' import Vuex from 'vuex' import axios from "axios"; Vue.use(Vuex) export default new Vuex.Store({ state:{ count:0 },//存储数据 mutations:{ increment (state) { state.count++ //可以更改state里面的count的值 } },//存方法，用于更改数据,并且每个方法第一个参数都是state actions:{ incrementAction (context) { context.commit('increment')//注意Action 提交的是 mutation，而不是直接变更状态 } },//进行异步函数操作，例如axios获取data数据 getters:{ unDoneLength(state){ return state.list.filter(x=>x.done===false).length //直接返回过滤得到的值 }//从 store 中的 state 中派生出一些状态，例如过滤和切换列表的操作 }) 3.在main.js中写如下代码： import store from "./store" new Vue({ store //添加 }) 4.在某一个xxx.vue文件中使用Vuex的时候 import {mapState,mapGetters} from 'vuex'//一般采用这种方式 //相当于把state和getters里面的返回值作为computed属性
Vuex的准备工作：
1.npm install vuex --save
2.与main.js同级创建store.js用于管理Vuex import Vue from 'vue' import Vuex from 'vuex' import axios from "axios"; Vue.use(Vuex) export default new Vuex.Store({ state:{ count:0 },//存储数据 mutations:{ increment (state) { state.count++ //可以更改state里面的count的值 } },//存方法，用于更改数据,并且每个方法第一个参数都是state actions:{ incrementAction (context) { context.commit('increment')//注意Action 提交的是 mutation，而不是直接变更状态 } },//进行异步函数操作，例如axios获取data数据 getters:{ unDoneLength(state){ return state.list.filter(x=>x.done===false).length //直接返回过滤得到的值 }//从 store 中的 state 中派生出一些状态，例如过滤和切换列表的操作 }) 3.在main.js中写如下代码： import store from "./store" new Vue({ store //添加 }) 4.在某一个xxx.vue文件中使用Vuex的时候 import {mapState,mapGetters} from 'vuex'//一般采用这种方式 //相当于把state和getters里面的返回值作为computed属性
展开
评论
点赞