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里的函数可以看做两个部分头部+回调函数