什么是Vuex纯手打,忘了怎么用就看看

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
})

猜你喜欢

转载自blog.csdn.net/qq_33026699/article/details/80833006
今日推荐