vuex的学习

Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`。

它采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化。

这几句话挺高大上的，我理解的就是组件之间的关系太乱，为了方便做些多组件需要做共同的一件事而做的大管家

但是为了管理的话我们可以直接用Vue.prototype为全局添加实列？

弄了几组对照后发现是因为没办法响应式更新

然后记录一下咋操作的

安装就 npm install vuex 啥的

1.首先在src文件下创建一个目录取名看几个案例都取的sort,我也取的sort,然后在目录下创一个.js文件

2.和导入路由相似的导入方式

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//安装插件 使用.use()它会自动去回调install方法

const store=new Vuex.Store({//声明对象
state:{},
 mutations:{},
actions:{},
getters{},
modules{},
});//五种属性 五大部件
export default store//导出store;别忘了去min里导入

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store/vuex";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//导入
  render: h => h(App)
});

这里我们注意到了store是全局导入了哈，那我们不就可以用this.$store.属性.xx获得属性里的数据了嘛

进入正题

1.state属性

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

const store=new Vuex.Store({
state:{
  counter:100,
  isactive:true//设置全局访问的对象
},
}）

这是你要设置的全局访问的 state 对象，也就是你需要 啥就丢个啥

这里我丢了个两个不同的数据类型 作为一个对比。

 那么如何在页面里得到state里的数据勒？

{{this.$sort.state.ccounter}}

2.getters和计算属性computed类似

getters:{
  doubleCounter(state){
    return  state.counter*2;
  }

取得数据与state类似

{{this.$sort.getters.doubleCounter}}

getters里除了state参数外还能传入getter

  getters:{
  doubleCounter(state){
    return  state.counter*2;
  },
  reduceCounter(state,getter){
    return getter.doubleCounter-2;
  }
  }

取得数据方法一样

3.mutations里面必须定义同步函数

 mutations:{
    increment(state){
      return state.counter++;
    },
    decrement(state){
      return state.counter--
    }
  }

在页面上我们得需要函数去提交increment和的decrement 按照我的理解即是mutations里的函数可以看做两个部分头部+回调函数

<template>
  <div id="app">
<h1>{{this.$store.state.counter}}</h1>
    <button @click="additon">+</button>
    <button @click="subtion">-</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods:{
    additon(){
      this.$store.commit("increment")
    },
    subtion(){
      this.$store.commit("decrement")
    }
  }
}

this.$store.commit("increment")里commit的回调increment里的函数 .
mutations还可以接受单个或多个参数

   在组件里面：
    第一种方式： this.$store.commit("increment",{name:'stark',age:18,n:5})
    第二种方式：
    this.$store.commit({
        type:"increment",
        n:5,
        age:18,
        name:'stark.wang'
    })

mutations: {
      
   increment(state, playload) {
         //playload来接收后面

        return state+playload.age;
        },
    

4.actions处理异步操作和mutations差不多但我在mutations里写异步函数比如setTimeout是可以响应在页面上的，但为什么不用？

因为在devtools检测不到状态树中树数据的变化，而actions可以。并且状态改变绕不开mutations

actions:{
 aincrement(context){
setTimeout(（）=>context.comit('increment')//不能绕开mutations
,1000)
}//这里的context可以理解为store

//app.vue里面用dispatch来提交给actions
methods：{
add.$store.dispatch('aincrement')
}

5.最后一个modules

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }
 
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})

要注意模块内部的数据：
getters====({state(局部状态),getters（全局getters对象）,roosState（根状态）})

actions====({state(局部状态),commit,roosState（根状态）}).