Vuex 学习笔记

目录

 

简介

基本对象

如何使用

总结

---

简介

vuex是一个为vue.js应用开发的状态管理模式

基本对象

1. state：数据仓库（类似于data）
2. getters：对数据获取之前再次编译，（类似于computed）
3. mutations：修改状态，同步。在组件中使用：$store.commit('',params) (类似于function)
4. actions：异步操作。在组件中使用：$store.dispatch('',params）

如何使用

1. 下载vue-cli项目：https://www.cnblogs.com/huihuijiang/p/8252851.html
2. npm install vuex
3. 在项目中新建store文件夹=>index.js文件

4. // index.js
   import Vue from 'vue'//引入vue
   import Vuex from 'vuex'//引入vuex
   //在Vue中使用Vuex
   Vue.use(Vuex)
   
   //创建Vuex实例实例
   const store =new Vuex.Store({
       state:{
           count:1,
           count1:0,
       },
       mutations:{
           add(state,n=0){
               return state.count+=n;
           },
           reduce(state,n=0){
               return state.count-=n
           }
       },
       actions:{
           addFun(context,n){
               return context.commit('add',n)
           },
           reduceFun(context,n){
               return context.commit('reduce',n)
           }
       },
       getters:{
           gettersCount1(state){
               return state.count1+=10
           }
       }
       
   })
   
   //导出store
   export default store;

   //main.js
   import Vue from 'vue'
   import App from './App.vue'
   import store from './store'
   
   Vue.config.productionTip = false
   
   new Vue({
     store,
     render: h => h(App),
   }).$mount('#app')
   

    

总结

• 如果需通过页面某个事件改变数据时使用mutation，如果获取前内部数据进行编译时使用getter ↵
• vue中，只有mutation能够改变state