VUEX--随记

1.VUEX--是啥
官网说明：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
个人理解：就是全局状态管理;多用于多组件之间的状态共享以及数据共享
2.VUEX--为啥用
统一管理防止分布管理引起的数据错误，如数据不一致

主要可以分为state getter mutation action module 五大块,个人的理解是 state (初始化数据)、getter (输出给外界数据) 、mutation (定义的方法)、action (输出给外界方法)、module（每一个js 文件都可以包含state getter mutation action四项，统一进行管理）

3.VUEX--咋用
1.VUEX引入
安装:npm install vuex --save
新建store文件夹，以及store.js
引入vuex，和申明使用vuex

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

创建仓库对象

const store = new Vuex.Store()
export default store

在main.js 文件中引入

  import store from '@/store/store';
  new Vue({
     el:"App",
     store,
  })

---

state:访问state对象，3种方法
方法1：使用this.$store

computed:{
  count(){
    return this.$store.state.count;
  }
}

方法2：使用mapState，注意: import时加{}

 import {mapState} from'vuex';
 computed:mapState({
    count:state=>state.count
 })

方法3：使用:mapState数组方法

computed:mapState(["count"])

2、mutations：同步修改数据
1）定义：

const mutations={
  add(state,n){
     state.count+=n;
  }
}

2）使用commit来调用mutations中的方法

@click="$store.commit('add',10)"

3）引用mapMutations，在methods中简化

methods:mapMutations([
      'add','reduce'
])

调用时，@click="reduce"

3、actions：异步修改数据
1）定义actions

const actions ={
   addAction(context){
      context.commit('add',10)
   },
   reduceAction({commit}){
      commit('reduce')
   }
}

2）调用方法同mutations

methods{
  ...mapMutations([
      'add','reduce'
   ]),
  ...mapActions([
    'addAction','reduceAction'
  ])
}

注意：使用... ES6语法
4、getters：数据过滤
1）定义

const getters = {
  count:function(state){
    returnstate.count +=100;
  }
}

2）使用

computed:{
  ...mapState(["count"]),
  count(){
    return this.$store.getters.count;
  }
}
//或者
...mapGetters(["count"])

5、模块化
1）定义模块

const moduleA={
   state,
   mutations,
   getters,
   actions
}

2）初始化store

export default new Vuex.Store({
  modules:{
      a:moduleA
  }
})

3）使用模块<h3>{{$store.state.a.count}}</h3>

computed:{
  count(){
     return this.$store.state.a.count;
  }
}