Vue全家桶--Vuex学习笔记

vuex学习

终于学完了vue vue-loader vuex三件套！vuex学习完了记录笔记如下，是看的b站上的vue入门到实战和对比着官方文档学习的

vuex安装

npm install -S vuex

store.js

import Vuex from ‘vuex’
import Vue from ‘vue’
Vue.use(Vuex)
const store = new Vues.store({
state:{},
mutations:{},
actions:{}
})
export default store

import store from ‘./store.js’
new Vue({
el:,
router,
store
})

使用state属性：state对象中是全局共享数据

访问方式:

1. this.$store.state.**
2. 映射为计算属性:
   import {mapState} frome ‘vuex’
   computed:{
   …mapState([’**’])
   }

• 注意: this.$store.state.count++这种方式去修改全局的变量是不合理的，不建议使用

使用mutation变更数据store中的数据

作用:集中监控变量的变化，可以看到是什么组件修改了数据
使用方式:

1. new Vuex.Store({
   state:{
   count,
   },
   // 变更状态
   mutations:{
   add(state,params){
   state.count++;
   }
   sub(state,params){
   state.count–;
   }
   }
   })
   组件中使用
   this.$store.commit(‘add’,params);
2. import {mapMutations} from ‘vuex’
   methods:{
   …mapMutations([’’,’*’])
   }

• 注意: mutations中不能书写异步代码

actions则专用于操作异步

操作的异步任务油mutations定义
使用方式:
new Vues.Store({
state:{},
mutations:{},
actions:{
asyncFunction(context){
context.commit(‘fun’,param);
}
}
})

1. 组件使用this.$store.dispatch{(}^{\prime }asnycfunctio{n}^{\prime })携带参数:传递参数this.$store.dispatch(‘asnycfunction’,params)
   接受参数actions:{
   function(context,param){

   }
   }

2. import {mapActions from ‘vuex’
   methods:{
   …mapActions([‘funct1’,…]),
   }

Getter

并非用于操作state中的全局数据，而是用于显示
getter:{
prop:(state)=>{
console.log(state.**)
}
}
组件中使用

1. this.$store.getters.**
2. import {mapGetters} from ‘vuex’
   computed:{
   …mapGetters([’***’]);
   }