vuex知识点

什么是vuex？

vuex 是一个专为vue.js应用程序开发的状态管理插件。采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交 mutation ,例如：
this.$store.commit('SET_PAUSE',pause),SET_PAUSE 是 mutations 属性中定义的方法。

vuex解决了什么问题？

解决：
   多个组件依赖于同一状态时。
   来自不同组件的行为需要变更同一状态。
当项目遇到上述问题，即可采用vuex来解决。

怎么使用vuex？

先安装依赖 npm install vuex --save
在项目目录src中建立store文件夹
在store文件夹下新建index.js文件，并写入下面代码： [state,getters,mutations,actions,modules](5个核心属性)
    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const store = new Vuex.Store({
        state:{  //state存储状态值，改变这个值的途径是：显式的提交(commit) mutation 。

        },
        getters:{

        },
        mutations:{

        },
        actions:{

        }
    })
    export default store;

然后在 main.js 文件中引入 此文件
    import Vue from 'vue';
    import App from './App.vue';
    import store from './store';
    Vue.prototype.$store = store;

    const vm = new Vue({  //可以换种写法
       store:store,
       render:h => h(App)
    }).$mount('#app')
    或者
    const app = new Vue({
       ...App,
       store
    })
    app.$mount();

vuex状态是对象时，使用时要注意什么？

因为对象是引用类型，复制后改变属性还是会影响原始数据，这样会改变 state 里面的状态，是不允许。所以先用深度克隆复制对象，再修改。

怎么在组件中批量使用vuex的state状态  以及 批量使用vuex的getter属性？

使用 mapState 辅助函数，利用对象展开运算符将 state混入 computed对象中。
import {mapState,mapGetters, mapMutations,mapActions} from 'vuex';
export default{
    computed:{
      ...mapState(['param1','param2']),
      ...mapGetters(['total','discountTotal']) //或者下面这种写法
      //或者
      ...mapGetters({ //给属性取别名
         myTotal:'total',
         myDiscountTotal:'discountTotal'
      })

      ...mapMutations({
         setNumber:'SET_NUMBER'   //然后调用 this.setNumber(20) 相当于调用 this.$store.commit('SET_NUMBER',20)
      })
      ...mapActions({
         setNumber:'SET_NUMBER' //调用 this.setNumber(10) == this.$store.dispatch('SET_NUMBER',10)
      })
    }
}

 vuex中要从state派生一些状态出来，且多个组件使用它，该怎么做？

使用 getter 属性，相当 vue 中的计算属性 computed ，只有原状态改变派生状态才会改变。
getter 接收两个参数，第一个是 state，第二个是getters（可以用来访问其他getter）：

在 store文件的 index.js中
export default new Vuex.Store({
   state:{
     price:10,
     total:10,
     discount:0.7，
     todos:[{
        id:1,text:'...',done:true
     },{
        id:2,text:'...',done:false
     }]
   },
   getters:{
     total:state=>{
       return state.price * state.number
     },
     discountTotal:(state,getters)=>{
       return state.discount * getters.total
     },
     getTodoById:(state)=>(id)=>{
       return state.todos.find(todo =>todo.id===id)
     }
   }
})

然后在组件中可以用计算属性 computed 通过 this.$store.getters.total来访问这些派生状态
computed:{
   total(){
     return this.$store.getters.total
   },
   getTodoById(){
     return this.$store.getters.getTodoById
   }
},
mounted(){
   console.log(this.getTodoById(2).done);//false
}

怎么通过 getter 来实现在组件内通过特定条件来获取state的状态？

通过让 getter 返回一个函数，来实现给getter传参。然后通过参数来进行判断从而获取state中的状态值
见上文代码

如何改变state里面的某个状态值？

在 mutations 中注册一个mutation
   mutations:{
     SET_NUMBER(state,data){
        state.number = data;
     }
   }

在组件中使用 this.$store.commit提交mutation，改变number值
   this.$store.commit('SET_NUMBER',20)

在使用mutations时需要注意一点：
   mutation 必须是 同步函数。

action  和 mutation 的区别？

action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态。
action可以包含任意异步操作。mutation只能是同步操作。
提交方式不同，action 是用 this.$store.dispatch('ACTION_DATA',data)来提交。mutation是用this.$store.commit('SET_NUMBER',data)来提交。
接受参数不同，mutation第一个参数是state，而action第一个参数是context，其包含了：
    {state,rootState,commit,dispatch,getters,rootGetters}


相同点：
    第二参数都可以接收外部提交时传来的参数。

 参考链接：https://juejin.im/post/6844903993374670855