[JavaScript知识库]vuex状态管理使用

小白建议看coderwhy老师的视频 ，讲的很明白，我在这里记录一下过程

最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

一、安装

1.命令

npm i vuex --save

2.引入? vue-cli4

新建src/store/index.js? ?（先这样，后边再拆分目录结构，一步一步来）

import { createStore } from 'vuex'
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})

main.js

二、使用

1.基本使用

比如父组件操作某个数加一减一，子组件实时变化，通过vuex实现：

src/store/index.js

export default createStore({
  state: {
    counter:100
  },
  mutations: {
    add(state) {
      state.counter++
    },
    subtract(state) {
      state.counter--
    }
  },
})

父组件：

<template>
  <div>
    <div>父组件：{{ $store.state.counter }}</div>
    <button @click="addFun">加</button>
    <button @click="subtractFun">减</button>
    <child />
  </div>
</template>
<script>
import child from "./components/child.vue";
export default {
  components: {
    child,
  },
  methods: {
    addFun() {
      this.$store.commit("add");
    },
    subtractFun() {
      this.$store.commit("subtract");
    },
  },
};
</script>

子组件：

<template>
  <div>
    <div>子组件：{{ $store.state.counter }}</div>
  </div>
</template>
<script>
export default {
  name: "child",
};
</script>

2.getters

就是将state里的数据经过某种变化再引用，类似计算属性

比如获取counter的平方，每次{{ $store.state.counter *?$store.state.counter }}会比较繁琐，我们可以在getters里计算好，然后页面直接使用

src/store/index.js

getters: {
    square(state) {
      return state.counter * state.counter
    }
  },

页面这样引用

<div>平方：{{$store.getters.square}}</div>

再比如：

<div>年龄超过20的学生：{{$store.getters.more20}}</div>
<div>年龄超过20的学生人数：{{$store.getters.more20Length}}</div>
<!-- 带参数 -->
<div>年龄超过某个年龄的学生：{{$store.getters.moreAge(20)}}</div>

  state: {
    students:[
      {name:'zs',age:'12'},
      {name:'ls',age:'33'},
    ]
  },
  getters: {
    more20(state) { 
      return state.students.filter(s => s.age > 20)
    },
    more20Length(state,getters) { //必须加上state 不然报错
      return getters.more20.length
    },
    moreAge(state) {
      return function(age) {
        return state.students.filter(s => s.age > age)
      }
    }
  },

?3.mutations带参数（参数不是一个的话就以对象形式传过去）

<button @click="addNumFun(10)">加某个数(10)</button>

methods: {
  addNumFun(num) {
    this.$store.commit("addNum",num);
  }
},

mutations: {
  addNum(state,num) {
    state.counter += num
  }
},

?另一种提交风格，注意打印出来的参数格式不一样

    addNumFun(num) {
      // this.$store.commit("addNum",num);
      // 另一种提交风格
       this.$store.commit({
         type:'addNum',
         num
       })
    }

    // addNum(state,num) {
    //   console.log(num) //5
    //   state.counter += num
    // },
    addNum(state,payload) {
      console.log(payload)   //{type: 'addNum', num: 10}
      state.counter += payload.num
    },

4.mutatons的类型常量? ?(为了规范名字，比如之前案例mutatons中的add)

新建src/store/mutations-type.js

export const ADD = 'add'

页面

import {ADD} from '../../store/mutations-types'

    addFun() {
      // this.$store.commit("add");
      this.$store.commit(ADD);
    },

src/store/index.js?

import {ADD} from './mutations-types'

mutations: {
    // add(state) {
    [ADD](state) {
      state.counter++
    },
}

5.vuex响应式

vuex的store中的state是响应式的，当state中的数据发生变化时，vue组件会自动更新（响应式系统会通知所有界面中用到该属性的地方，让界面发生刷新）

?6.actions异步提交

比如修改信息计时器模拟异步

export default createStore({
  state: {
    info:{
      name:'hh',
      age:'14'
    }
  },
  mutations: {
    editInfo(state) {
      state.info.name = 'kk'
    },   
  },
  actions: {
    editInfoActions(context,payload) {
      setTimeout(()=> {
        context.commit('editInfo')
        console.log(payload)
      },1000)
    }
  },

})

<div>信息：{{ $store.state.info }}</div>
<button @click="editInfoFun">修改信息</button>

methods: {
    editInfoFun() {
      // this.$store.commit('editInfo')
      this.$store.dispatch('editInfoActions','我是payload')
    }
},

如果修改完页面想做一些其他操作（通知页面修改成功了），就需要有个回调

actions: {
    editInfoActions(context,payload) {
      return new Promise((resolve,reject) => {
        setTimeout(()=> {
          context.commit('editInfo')
          console.log(payload)

          resolve(2222)
        },1000)
      })
    }
},

editInfoFun() {
      this.$store.dispatch('editInfoActions','我是payload')
      .then(res => {
         console.log(res)//2222
      })
}

7.modules模块划分

当项目复杂时，store对象可能变得臃肿，我们可以将store分割成模块，每个模块拥有自己的state,mutations.actions,getters

    <div>姓名：{{ $store.state.a.name }}</div>
    <button @click="updateNameFun">修改名字</button>
    <div>我叫XX：{{ $store.getters.fullname }}</div>
    <div>我叫XX呀：{{ $store.getters.fullname2 }}</div>
    <div>我叫XX呀 + 根模块的counter：{{ $store.getters.fullname3 }}</div>
    <button @click="asyncUpdateNameFun">异步修改名字</button>


  methods: {
    updateNameFun() {
      this.$store.commit("updateName",'kkkk')
    },
    asyncUpdateNameFun() {
      this.$store.dispatch('updateNameActions')
    }
  },

const modulesA = {
  state: {
    name: 'ff'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  getters: {
    fullname(state) {
      return '我叫' + state.name
    },
    fullname2(state, getters) {
      return getters.fullname + '呀'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    updateNameActions(context) {
      setTimeout(() => {
        context.commit('updateName','wwwww')
        console.log(context)//可以拿到根store里的
      }, 1000)
    }
  },
}
export default createStore({
  state: {
    counter: 100,
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    a: modulesA
  }
})

8.目录划分