vuex基础知识

什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation，例this.$store.commit(‘SET_VIDEO_PAUSE’, video_pause，SET_VIDEO_PAUSE为mutations属性中定义的方法。

Vuex解决了什么问题？

解决两个问题

• 多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

• 来自不同组件的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

什么时候用Vuex？

当项目遇到以下两种场景时

• 多个组件依赖于同一状态时。
• 来自不同组件的行为需要变更同一状态。

怎么引用Vuex？

• 先安装依赖nnpm install vuex --save
• 在项目目录src中建立store文件夹
• 在store文件夹下新建index.js文件,写入

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生产环境debug为true
const debug = process.env.NODE_ENV !== 'production';
//创建Vuex实例对象
const store = new Vuex.Store({
    strict:debug,//在不是生产环境下都开启严格模式
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    }
})
export default store;

• 然后再main.js文件中引入Vuex,这么写

import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')

Vuex的5个核心属性是什么？

分别是 state、getters、mutations、actions、modules 。

Vuex中状态储存在哪里，怎么改变它？

存储在state中，改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。

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

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

怎么在组件中批量使用Vuex的state状态？

使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['price','number'])
    }
}

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

使用getter属性，相当Vue中的计算属性computed，只有原状态改变派生状态才会改变。
getter接收两个参数，第一个是state&