vuex是什么，怎么使用

Vuex是什么？

vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。

Vuex状态管理跟使用传统全局变量的不同之处

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

优点：

在state中定义了一个数据之后，可以在任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。

Vuex的运行机制：

Vuex提供数据（state）来驱动视图（vue components），通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state。
白话：在组件中通过dispath派发actions，然后在actions中通过context.commit提交到mutations，在mutations中完成对store的修改。store中的数据只能由mutations来修改

核心：

①state： 存储数据的地方，类似一个仓库
②mutations：同步操作，只有mutations才可以修改state中的数据
③actions：异步操作，其实就是调用mutations里面的方法。
④module：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。模块化 modeA, modeB，modeC
⑤getters：是state的计算属性。

怎么引用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')

state：存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。

action：
用来解决异步流程来改变state数据。
而matution是直接进行同步操作的，如果你在mutations里进行异步操作，你会发现没用，并不会起任何效果
只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下：

export default new Vuex.Store({
  //存放数据
  state: {
    count: 5, 
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,val) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',val)
        },3000)
    }
  }
})

vue组件中通过事件触发action

methods: {
   getVal() {
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',1)
   }
 }

Mutations：
Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受 state作为第一个参数，第二个是自定义传参

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发，例如：

methods: {
getVal(event) {
//获取当前的按键的值
let value = event.target.dataset.value;
//通过commit提交一个名为increment的mutation
this.$store.commit(“increment”, value);
}
}

在组件中获取{{count}}方式：

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

1.increment官方说是type，其实就是注册的事件名
2.可以是单个参数
3.如果是多个参数，我们则用对象放入，否则会报错

Getters
可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

getters 接受 state 作为其第一个参数

 const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });

在组件中获取{{newCount}}方式：

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};  

组件中触发action、mutation

 methods:{
     jia(){
         console.log(this.$store)
        this.$store.commit("increment", 1);
     },
     jian(){
         this.$store.commit('decrement',1)
     },
     twojia(){
         this.$store.dispatch('getParamSync',1)
     }
  },

语法糖辅助函数

语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters
当一个组件需要多个状态是，这些状态都声明成计算属性过于冗长。于是有了辅助函数

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'


computed:{
    ...mapState({
        a:"a",   //  "a" 指的是state中的a
        b:"b"
    }),
    ...mapGetters({
        Val:'newVal' // 可以重新命名
    })
}

methods:{
    ...mapActions({
        getSync:'getSyncNum'
    })

    ...mapMutations({
        increament:"increament"
    })
}



template

{{a}}  {{b}}

{{getSync(1)}}

<button @click='increament(1)'></button>

modules 模块化管理数据

状态树结构复杂的时候，可以用modules进行管理。
多人协同开发，可以用modules，避免命名空间冲突。

//创建store，分模块定义
const  test1 ={
    namespaced:true, //开启命名空间，在各组件总 ...mapState("test1",{name:"name"})
    state:{name:'test1'},
    actions:{},
    mutations:{
    changeName(state,arg){
            state.name=arg;
        },
    getters:{}
}

const test2 = {
    namespaced:true,
    state:{},
    actions:{},
    mutations:{
        
        }
    },
    getters:{}
}

new Vuex.Store({
    state:{name:"root"},
    actions,
    mutations,
    getters 
    modules:{
        test1,
        test2
    }

})


在组件中使用：

{{this.$store.state.name}}

{{name}}

{{this.$store.state.test1.name}}

{{tes1Name}}


computed:{
    ...mapState({
        name:“name"
    }),
    ...mapState('test',{   
        test1Name:'name'
    })
}
methods:{
    ...mapMutations('test1',['changeName'])
}

备注

 ...mapState("test1',['name'])

 ...mapState('test1',{newName:'name'})

 如果展开数组，组件中不可以重命名，
 如果展开时对象，可以重命名