vuex的使用

vuex是vue中的状态管理模式
vuex是sre文件下store文件中，
首先引入vuex 和vue(前提安装了vuex)
store下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
   state: { 
        //这里面写入数据
    },
    getters:{ 
        // 在这里面写个方法,对state中的数据怎加或者减少
    },
    mutations:{ 
        // mutations 类似methods
        // 写方法对数据做出更改，里面不能写异步操作，只能写同步操作
    },
    actions:{
        // 写方法对数据做出更改，不过是更改mutations中的，可以写异步操作
    }
 
})
export default store

state:

在vue中拿取到state值有3种方法

1. 直接使用this.$store.state.name获取
2. 使用计算属性
3. 使用mapState(其中这里面包含四种写法)
   (1):扩展运算符，解构赋值   ...mapState(['name','sex'])
   (2):扩展运算符，自定名字  ...mapState({ aliasName: 'name',sexName:'sex' })
   (3):使用函数...mapState({ddkk:state => state.name})
   (4):直接在计算属性下 写mapState(['name'])

store下的index.js文件如下

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        name: 'jk',
        sex: 'sex'
    },
})
export default store;

HelloWorld代码如下

<template>
  <div class="hello">
    <div>直接获取  {{$store.state.name}}</div>
    <div>使用计算属性获取  {{getName}}</div>
    <div>这是1  {{name}}</div>
    <div>这是2  {{twoName}} {{twoSex}}</div>
    <div>这是3  {{threName}} </div>
    <div>这是4 {{name}} {{sex}}</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  components: {},
  mounted() {
    console.log(this.$store.state.name);
  },
  // 也可以使用计算属性
  computed:{
    getName(){
      return this.$store.state.name  //使用计算属性获取
    },
    // ...mapState(['name','sex'])   // 这是1
     //   twoName 是重新起的名字
    ...mapState({ twoName: 'name',twoSex:'sex' }), //这是2
    // ...mapState({threeName:state => state.name})  // 这是3
  },
  // computed: mapState(["name", "sex"]), //这是4  这个是单个的，不能多个
  methods: {
    // 辅助函数mapState的原理
    // mapState(arr) {
    //   let obj = {};
    //   arr.forEach((key) => {
    //     obj[key] = function () {
    //       console.log(this);
    //       return this.$store.state[key];
    //     };
    //   });
    //   return obj;
    // },
  },
};
</script>

<style scoped lang='scss'>
.hello {
  height: 200px;
  width: 100px;
  border: 1px solid red;
  &-nide {
    color: red;
  }
}
</style>

getters：
store下的index.js

   // getter不是修改state本身是修饰state中的数据
    getters:{
        // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上
        xiuName:state=> `hello${state.name}`,
        xiuSex:state=> state.sex,
        // 等价于
        // xiuName(state){
        //     return`hello${state.name}`
        // }
    }

拿取getters中的值在组件中可以使用this.$store.getter.xiuName也可以使用mapGetters

export default {
    mounted() {
        console.log(this.xiuName);
        console.log(this.$store.getter.xiuName);
    },
    computed: {
        ...mapGetters(['xiuName']),
        //...mapGetters({ xiuSex: 'xiuSex' }),  
        // 赋别名的话，这里接收对象，而不是数组
    },
}

Mutation

mutation是用来修改state中的值的，我们通常修改数据都是直接修改赋值的，但是使用vuex的话不可以直接修改，需要在mutation修改，Mutations里面的函数必须是同步操作！！！
store下的 index.js

 
    state: {
        name: 'jk',
        sex: 'sex',
        number:6,
        obj:{
            persion:'张三'
        }
    },


mutations: { // 增加nutations属性
        setNumber(state) {  //state是必须默认参数,修改state中的number的值，第一个参数是必须传的
            state.number = 5;  //修改number中的值为5
        },
        setPersion:(state,payload)=>{  //  增加一个带参数的mutations方法，并且官方建议payload为一个对象
            state.obj.persion = payload.persion
        }
    },

vue中的写的

 mounted() {
    console.log("未修改的值", this.$store.state.number);
    console.log("未修改的值", this.$store.state.obj.persion);
    this.$store.commit("setPersion", { persion: "李四" }); // 调用的时候也需要传递一个对象
    this.$store.commit("setNumber"); // 调用的时候也需要传递一个对象
    console.log("修改的值1", this.$store.state.number);
    console.log("修改的值1", this.$store.state.obj.persion);
  },

action
actions存在的意义是假设你在修改state的时候有异步操作的时候，不能mutations中添加异步操作，
 

    state: {
        name: 'jk',
        sex: 'sex',
        number: 6,
        obj: {
            persion: '张三'
        },
    },

actions: {
        setNum(content) { // 增加setNum方法，默认第一个参数是content，其值是复制的一份store
            return new Promise(resolve => {  // 我们模拟一个异步操作，1秒后修改number为888
                setTimeout(() => {
                    content.commit('setPersion',{persion:'张五'});
                    resolve();
                }, 1000);
            });
        }
    }

vue中写法

  mounted() {
    console.log('未修改的',this.$store.state.obj.persion)
    this.$store.dispatch('setNum')
    console.log('修改过的',this.$store.state.obj.persion)
  },