import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { age:[{ name:'yaohuiqian', age:1 },{ name:'yaohuiqian2', age:2 },{ name:'yaohuiqian3', age:3 },{ name:'yaohuiqian4', age:4 }], name:'姚辉乾' } // 语法检测的时候 new必须进行赋值 /* eslint-disable no-new */ //暴露出去以后,在main.js里面引入import store from './vuex' //然后在new Vue里面的router,下面加入store //使用vuex的方式很多有四五种 //第一种使用方法是[{{ $store.state }}] //第二种使用方法 import {mapState} from ‘vuex’ //mapState保存vuex变量 //mapState一般就放在计算属性里面computed使用方式是三个点 //例如:在当前页面直接{{name}} 就会直接出来姚辉乾 // computed:{ // ...mapState([ // 'name' // ]) // } //例如怎么在函数里面用vuex里面的值 //this.name就可以获取到 例如:alert(this.name) // mutations主要就是操纵state里面的数据 const mutations = { sddage(){ state.age++ } } //使用mutations,应该在VUE页面里面 // 第一步: import {mapState,mapMutations} from 'vuex' // 第二步: methods:{ // ...mapMutations([ // 'addage' //直接写入函数名字就可以使用 可以在@click="addage()"这样使用 // ]) // } //mutations可以直接使用,也可以用actions这个可以进行异步操作 //actions是用来调用mutations里面的方法 可以进行异步操作 //如何使用:放到vuex下面 这个最后一行 // 然后import{mapState,mapMutations,mapActions} from 'vuex' const actions = { //默认接收了一个参数 addagepro({commit}){ commit('addage') } } //使用methods:{ // ...mapActions([ // 'addagepro' //可以@click="addagepro()" // ]) // } // getters 相当于computed的作用作用于state过滤操作...... //import{mapState,mapMutations,mapActions,mapGetters} from 'vuex' //以下操作就是return出来 age里面的age const getters = { //因为是过滤数据,传入的是state guolv (state) { guolv: state => { return state.age.filter(todo => todo.done) } } } //...mapGetters([ // 'guolv' // ]) export default new Vuex.Store({ //底下有四种东西 把vuex暴露出去 //是用来保存数据的 state, mutations, actions })
什么是Vuex纯手打,忘了怎么用就看看
猜你喜欢
转载自blog.csdn.net/qq_33026699/article/details/80833006
今日推荐
周排行