1. 状态管理的工具
  2. 可以存用户的登录状态 用户名称 头像  商品收藏 购物车物品

使用

index.js

  1. //引入vue
  2. import Vue from 'vue'
  3. //引入vuex
  4. import Vuex from 'vuex'
  5. //通过vue.use安装 vuex
  6. Vue.use(Vuex)
  7. //创建对象 new Vuex 使用里面的Store方法
  8. var vuex = new Vuex.Store({
  9.   state: {
  10.     counter:1000//获取方式 {{$store.state.counter}}
  11.   },
  12.   mutations: {
  13.   },
  14.   actions: {
  15.   },
  16.   getters: {
  18.   },
  19.   modules: {
  20.   }
  21. })
  22. //导出
  23. export default  vuex

main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. //将vuex导出来
  5. import store from './store'
  6. Vue.config.productionTip = false
  7. new Vue({
  8.   router,
  9.   store,//使用
  10.   render: h => h(App)
  11. }).$mount('#app')

state

  1. //设置共享的内容
  2. state: {
  4. },
  5. eg:
  6. state: {//设置共享内容
  7.     counter:1000,
  8.   },
  9. 获取设置的值： $store.state.counter  //其他组件中使用方式

mutations

  1. //修改state中的内容
  2. mutations: {
  4. },
  5. eg：
  6. mutations: {//修改共享的内容  在里面定义方法 默认有个state参数包含着共享的内容
  7.     increment(state){
  8.         state.counter++;
  9.   },
  10. decrement(state){
  11.   state.counter--
  12.  }
  13. },
  14. 使用mutations中设置的方法： 
  15. methods: {
  16.  add() {//通过$store.commit()方法 里面传入在mutations中设置的方法名进行调用
  17.     this.$store.commit("increment");
  18.    },
  19.   sub() {
  20.     this.$store.commit("decrement");
  21.    }
  22. },
  24. 传递参数
  25. 直接在mutations对象中添加方法
  26. incer5(state,data){//直接添加参数
  27.       state.counter+=data;
  28.  }
  29. 使用在methods：方法中通过commit方法传入
  30. add5(count){
  31.  this.$store.commit('incer5',data);
  32. }

mutations提交风格

  1. 第一种:传递的参数mutations接收的传递的数
  2. this.$store.commit('incer5',data);
  3. 第二种：第二种传递的参数mutations接收的是一个对象
  4. this.$store.commit({
  5.   type:'incer5',//mutations中的方法名
  6.   count:data //需要传的参数
  7. })
  1. 在mutations给state中的对象添加新属性可以使用
  2. Vue.set(对象名，'新加的属性','属性值'); //可以实现响应式 直接添加在页面中不会显示
  3. 在mutations给state中的对象删除属性可以使用    
  4. Vue.delete(对象名,‘删除的属性’)

actions

  1. mutations处理数据 actions接收异步数据
  2. actions: {
  3.   },
  4. 不在mutations中进行异步操作 比如网络请求 Actions类似于Mutation但是是代替mutations进行异步操作的
  5.  eg:
  6.  actions: {
  7.     aUpdataInfo(context){
  8.       setTimeout(() => {
  9.         // 修改数据还是必须通过mutations中的方法
  10.           context.commit("incer5",5)
  11.       }, 1000);
  12.     }
  13.   },
  14. 使用:通过dispatch方法 如果传递参数也是在actions中的方法中写参数 在dispatch中直接传；注意参数可以穿方法、传对象
  15. add5(count){
  16.       this.$store.dispatch("aUpdataInfo");
  17.     }

getters

  1. 用于对state中的数据进行处理相当于vue中的computed属性
  2. getters: {
  4. },
  5. eg：
  6. getters: {
  7.  coms(state){
  8.    return state.counter * state.counter;
  9.   }
  10.   coms(state,getters){//getters中还可以把getters对象当做参数进行接收可以通过getters.方法获取里面的方法
  11.    return state.counter * state.counter;
  12.   }
  13.  },
  14. 获取值：$store.getters.coms
  15. 如果想对getter对象中的方法传递参数
  16. getters: {
  17.       coms(state){
  18.         return function(c){//方法：返回一个带参数的方法 从方法中在进行返回对state操作的值
  19.           return state.counter+c;
  20.         }
  21.       }
  22.   },
  23. $store.getters.coms(8)//传参

modules

  1. 可以进行模块的划分 
  2. 把按模块进行区分方便管理
  3. modules: {
  4.   }
  5. eg:
  6. modules：{
  7.   a:{
  8.     state:{}
  9.     actions:{}
  10.     mutations:{}
  11.     getters:{}
  12.   },
  13.   b:{
  14.    state:{}
  15.    actions:{}
  16.    mutations:{}
  17.    getters:{}
  18.   },
  19. }
  20. 获取：$store.state.a.定义的属性
  21. mutations actions  getters用法相同
  22. getters如果想获取到根getters中的内容需要添加第三个参数rootState