vuex 学习

vuex

1. vuex是什么？
   为vue开发的状态管理模式的库，用来管理vue里面的所有组件的状态
2. vuex的使用
   安装：npm install vuex@next --save
   yarn add vuex@next --save
   使用：在src目录下，创建store文件夹，在文件夹里面新建index.js

//引入vue
import Vue from "vue";
//引入vuex
import Vuex from "vuex"
//注册vuex
Vue.use(Vuex)
//创建一个实例
const store =new Vuex.Store({
    //里面写相关配置项目
})
//暴露出去
export default store

3. vuex的核心概念
   State：用于存储数据的，可以理解成他是一个数据库，所有的组件都能访问里面的数据，也可以存储数据
   用法：

//在store实例里面添加
  state:{
        num:100,
        userinfo:{
            username:'张三',
            sex:'男',
            age:20
        }
    },
//把数据加载到组件中
//方式一：
{{$store.state.num}}
//可以获取到num的值
//方式二：
//在script中按需导入
import { mapState } from "vuex";
//使用计算属性进行映射
export default {
  computed: {
    ...mapState(["num"])
  },
};
//在页面上使用，根据需求使用
{{ num }}

Getter：如果state里面数据嵌套的层数比较多，写起来就比较的麻烦，可以利用Getter方法来获取store里面的数据，也可以根据一些其他的情况，对store里面的数据进行修改，Getter是依赖于store而存在的

getters:{
       userName(state){
       //必须有return
           return state.userinfo.username
       },
//箭头函数写法
     userAge: (state) => state.userinfo.age
    }
 //把数据加载到组件中
//方式一：
     {{$store.getters.userName}}
 //方式二：
  //在script中按需导入 
  import { mapState ,mapGetters} from "vuex";
  //也是使用计算属性
   computed: {
    ...mapState(["num"]),
    ...mapGetters(["userName"]),
  },

Mutation：用来修改state里面的数据

 mutations:{
        changeNum(state,data){
            state.num+=data
        }
    },
   //方式一
 //使用commit调用这个函数
//点击一下，修改state里面的数值，后面的变量根据需求进行传参
 <button @click="$store.commit('changeNum',10)">num+10</button>
 //方式二
 import { mapState ,mapGetters, mapMutations} from "vuex";
 //在methods中使用
  methods: {
    ...mapMutations(["changeNum"]),
  },
 //使用方法，点击一下state里面的数据就进行修改
  <button @click="changeNum(-10)">-10</button>

Action：主要是包含任何的异步操作，比如数据请求，定时器等，用法基本和Mutation类似，但是修改State里面的数据，还是需要使用Mutation，所以Action里面基本包含Mutation。

//使用定时器进行异步
 actions:{
        changeNumAsync(context,data){
            setTimeout(() => {
            //必须使用commit方法
                context.commit('changeNum',data)
            }, 1000);
        }
    },
   //方式一
   <button @click="$store.dispatch('changeNumAsync',+5)">异步+5</button>
   //方式二
   import { mapState ,mapGetters, mapMutations ,mapActions} from "vuex";
   
    methods: {
    ...mapMutations(["changeNum"]),

    ...mapActions(["changeNumAsync"]),
  },

4. vuex的单向数据流
   
   页面触发了一个方法，需要从服务器请求数据（Action），
   让后对请求的数据处理（Mutation），同时监听（Mutation），
   数据处理完成后，进行存储（State），
   让后页面获取State里面的数据，完成一个闭环。