vuex 学习

怎么理解呢？反正vuex是一个状态管理器，用来管理全局的组件状态，比如有很多个组件都会修改同一个数据，同时这个数据又要在多个组件上同时显示，这个时候用 vuex 来统一管理这些组件的状态，会让逻辑更清晰，更可维护。

我的理解：就是当一个数据被多个组件同时公用时。我才会把数据存入vuex中。

目录

1.在组件中去使用vuex

2.获取、修改state的值。

3.获取getter获取state值(计算属性)

4.异步请求修改数据

5.分模块化设计

---

1.在组件中去使用vuex

单纯配置来说，和vue-router相似。

这里面的以参数只能留给state(公共数据)

包结构 

index.js文件

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

 const store = new Vuex.Store({
    state:{ // 公共数据
      
    },
    mutations:{ // 用来修改state和getters的数据
    },
    getters: { // 计算属性

     },
     actions: { // 发起异步请求

      },
      modules:{ // 拆分模块

      }

})
export default store;

vue实例注入store对象

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from "@/store"

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

2.获取、修改state的值。

跟router有异曲同工之妙

this.$store.state.属性名 来获取值。

修改的话，调用mutations的方法修改

index.js文件

state:{ // 公共数据
       num:10,
    },
    mutations:{ // 用来修改state和getters的数据
        // 对应的事件，卧槽,state对应的就是上面的state,但是newValue是你自己传过来的。
        setNum(state,newVal){
            state.num = newVal
        }
    },

 通过this.$store.commit.("mutations事件名",修改的值)

<template>
   <div>
    <h2>{{ this.$store.state.num }}</h2>
    <button @click="modify">点我修改</button>
   </div>
</template>

<script>
export default {
   methods:{
    // 修改
    modify(){
// 参数1，modutains中的事件名，20就对应你要修改的参数了。
         this.$store.commit("setNum",20)
    }
   }
}
</script>

3.获取getter获取state值(计算属性)

反正，总感觉挺没用的！！

this.$store.getters.方法名

getters: { // 计算属性
       tenNum(state){
        return state.num * 10
       }
     },

 add(){
       this.num =  this.$store.getters.tenNum
    }

4.异步请求修改数据

通过this.$store.dispatch('action名', 参数),修改数据

这个actions请求数据一定要和mutaions中的方法绑定。

const mutations = { // 修改state值,同步执行刷新页面
    updateUser(state,user){
        state.user = user
    }
}

const actions = { // 修改state值，异步执行不刷新页面
    asyncUpdateUser(context,user){
     // 1.发异步请求,请求数据
     // 2.commit调用mutation 来修改数据

        context.commit("updateUser",user)
    }
}

5.分模块化设计

包结构

 将之前写在store中Index.js文件抽出来，(你没设置一个state对象，都需要设置一系列修改(mutaions、actions)、获取(getters))，一旦需要公用的对象变多，就很乱。因此我们将抽出来。

user.js

const user = {

    // 我们这个数据，就是存储一个公共数据，任何组件中都能修改获取他。但由于是存储到内存中，因此要做持久化处理。
 state : {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{}
    },

 getters :{ // 获取state值
    getUser(state){
        return state.user;
    }
},

 mutations :{ // 修改state值,同步执行刷新页面
    updateUser(state,user){
        state.user = user
    }
},

 actions : { // 修改state值，异步执行不刷新页面
    asyncUpdateUser(context,user){
     // 1.发异步请求,请求数据
     // 2.commit调用mutation 来修改数据

        context.commit("updateUser",user)
    }
}
}

export default user;

index.js

import Vue from "vue"
import Vuex from "vuex"
// vuex模块
import user from "../store/module/user.js"

Vue.use(Vuex)




const store = new Vuex.Store({
    // 模块引入
    modules:{
        user
    }
})


export default store

使用方法不变。