Vue 中 store 基本用法

用来管理状态，共享数据，在各个组件之间管理外部状态

第一步：项目安装vuex插件

npm i vuex

第二步：引入vuex，并通过use方法使用它

import Vuex from 'vuex'
Vue.use(Vuex)

第三步： 创建状态仓库

//创建状态仓库，注意第二个Store是大写的不能改，,state也是不能改

var store = new Vuex.Store({
state:{    //在state对象建立需要数据
      XXX：xxx
      }
})

第四步：在main.js注入Vue实例当中

 new Vue({
  el: '#app',
  router,
  store,   //注入store,当键名(key)和值(value)名字一样可以这样缩写
  components: { App },
  template: '<App/>'
})

第五步：通过this.$sore.state.XXX拿到全局状态

computed:{
    getOutterNum:function(){
      return this.$store.state.XXX
    }
  }

七、Vuex的相关操作
vuex状态管理的流程
view——­>actions—–>mutations—–>state——­>view

一、
方法一、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

const store = new Vuex.Store({    //定义了store
  state:{
        num:88
        },
  mutations:{    //定义状态改变函数  相当于methods方法
      increase:function(state){
           state.num++
      },
      decrease:function(state){
          state.num--
    //1、store.commit('save')  定义了的store利用commit在mutations调用自身mutations其他函数
      }
    //2、save(){...}
  }
})

在其他组件中利用commit来触发mutations函数

 methods:{
    sadd:function(){
      this.$store.commit('increase')  //commit方法里面是mutations定义的函数名
    }
  },

this.$store.commit('increase',xxx) xxx表示传入参数，如果需要传入多个参数，将xxx表示成对象{xxx1:'',xxx2:''}方式传入，在对象内构成多个需要传入参数。
方法二：
利用actions中对mucations进行操作，间接对state进行修改

 mutations:{
    increase:function(state){
         state.num++
    },
    decrease:function(state){
         state.num--
    }
  },
  actions:{   //actions中只能对mucations进行操作
      //context为上下文对象
     decreaseActions:function(context){
          context.commit('decrease')  //decrease方法是mucations中定义的方法
    }
  }
})

利用dispatch来触发actions函数

saddActions:function(){
      //dispatch方法里面是actions定义的函数名
      this.$store.dispatch('decreaseActions')
  }

mucations和actions两者之间区别
1、传递参数不一样，前者传递是state，后者传递是context。
2、调用的方式不一样，前者靠this.$store.commit('xxx')触发，后者靠this.$store.dispatch('xxx')触发。
3、actions可以包含异步操作，但是mutation只能包含同步操作

actions:{  
     decreaseActions:function(context){
       setTimeout(() => {     //延时一秒的异步操作
        context.commit('decrease')
       }, 1000);
    }
  }

二、getters是vuex中的一个属性，主要作用于vue中的计算属性（computed）类似，用来存放一些经过修改的数值

 getters:{
      getNum:function(state){
         return state.num>0? state.num:0
      } 
  }

在调用getters中的内容是使用$store.getters.函数名进行调用

computed:{
    getParentNum:function(){
      return this.$store.getters.getNum   //getNum是getter里面定义方法
    }
  }

总结：在工程化项目中，vuex所有内容建议和routers一样，在src中建立一个state文件夹>index.js，将vuex内容写在index.js中，再导出到main.js中。