[JavaScript知识库]学习vuex这一篇就足够了

vuex

vuex简介

点击vuex 查看官网

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

为什么使用vuex?

有什么状态时需要我们在多个组件间共享呢？

比如用户的登录状态、用户名称、头像、地理位置等等。

比如商品的收藏、购物车中的物品等等。

这些状态信息，我们都可以放在统一的地方，对它进行保护管理，而且它们还是响应式的。

vuex的五种状态

1.state

state师vuex专门用来管理公共状态的

使用方式：

export default new Vuex.Store({
  state: {
    // 公共状态
    name: '上海',
    path: '前端',
    todos: [
      {
        id: 1,
        name: 'lisi'
      },
      {
        id: 2,
        name: 'zhangsan'
      },
      {
        id: 3,
        name: 'wangwu'
      }
    ],
    list:{}
    
  },
})

这些属性我们就叫做状态，怎么再页面上来使用这些状态呢？

我们有两种方法：

1.this.$store.state.xxx

  computed:{
    path(){
      return this.$store.state.path
    },
    todos(){
      return this.$store.state.todos
    }
  }

将状态放在计算属性中是为了检测变化，可以及时响应。

2.mapState

使用mapState也有两种方式

  // mapState使用方式一
  computed:mapState({
    path: state => state.path,
    todos: state => state.todos
  })

  // mapState 使用方式二
  computed:mapState(["path","todos","name"])

这两种方式的在html中应用都是一样的

<div> {{path}} {{todos}}</div>

2.getter

在getter中可以获取state中的状态，但是不可以改变状态。说简单点就是将state中的状态取出来经过一些变换得到自己想要使用的数据，但是不影响state中数据的变化。

设置getter

在store下的index.js中

  getters: {
      // 变换一下数据
    path: state => {
      return state.name + state.path
    },
    // 通过传参来决定取哪一个数据 这里第二个参数就是传递进来的参数
    todos: state => id => {
      return state.todos.find(todo => todo.id === id)
    }
  },

在页面中使用getter的数据也有两种方式

1.this.$store.getter.xxx

  computed:{
    path(){
      return this.$store.getters.path
    },
        // 传参
    todos(id){
      return this.$store.getters.todos
    }
  }

2.mapGetters

computed: mapGetters(["todos"])  // 这种方式相当于直接调用getter中的todos方法

在html引用一样的,值得注意的是这里的getter可以传参，直接想函数一样就可以了

<div> {{path}} {{todos(1)}}</div>

3.mutations

前面的getter不可以修改state中的状态，mutations中可以用来修改state中的状态，需要注意修改的方法必须是同步的。

 mutations: {
    changeName (state, name) {
      state.name = name
    },
    changeList (state, data) {
      state.list = data
    }
  },

在页面中的使用的时候有两种方式来调用mutations中的方法

1.通过this.$store.commit(“xxx”,“parms”)

参数可以是对象

  methods:{
    changeName(name){
      this.$store.commit("changeName",name);
    }
  }

2.mapMutations

 methods: mapMutations(['changeName']),

在html中的调用

<button @click="changeName('李崇')">点击名字改变</button>
    <h1>{{name}}</h1>

4.actions

mutations是同步操作，actions就是异步操作。

 actions: {
    getDate (store) {
      axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
        console.log(res.data)
        store.commit('changeList', res.data)
      }).catch(error => {

      })
    }
  },
      
  mutations: {
    changeList (state, data) {
      state.list = data
    }
  },

如果我想在actions中来修改state中的状态呢？很简单，不可以直接在actions中区修改，只能在actions的异步函数中通过commit方法来调用mutations中的方法来需改

在页面上的调用方式也有两种

1.this.$store.dispatch(“xxxx”,parms)

 methods: {
    changeTodos () {
      this.$store.dispatch('getDate')
    }
  }

2.用mapActions

methods: mapActions(["getDate"])

在html中的使用

// 第一种方式的  
<button @click="changeTodos()">点击actins</button>
// 第二种方式，这里的名字直接写的就是 mapActions(["getDate"])中的参数
    <button @click="getDate">点击actins</button>

    {{list}}

5.modules

modules就是将每个state的状态抽取出来，让每一个状态都有自己的state、getter、mutations、actions

将涉及到的state抽取出来

创建三个js list.js、 name.js、todos.js

没有模块化之前的index.js是这样的

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 公共状态
    name: '上海',
    path: '前端',
    todos: [
      {
        id: 1,
        name: 'lisi'
      },
      {
        id: 2,
        name: 'zhangsan'
      },
      {
        id: 3,
        name: 'wangwu'
      }
    ],
    list:{}
    
  },
  getters: {
    path: state => {
      return state.name + state.path
    },
    // 通过传参来决定取哪一个数据
    todos: state => id => {
      return state.todos.find(todo => todo.id === id)
    }
  },
  mutations: {
    changeName (state, name) {
      state.name = name
    },
    changeList (state, data) {
      state.list = data
    }
  },
  actions: {
    getDate (store) {
      axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
        console.log(res.data)
        store.commit('changeList', res.data)
      }).catch(error => {

      })
    }
  },
  modules: {
  }
})

模块化之后，将相应的部分抽取出来。index.js就变成了这样

import Vue from 'vue'
import Vuex from 'vuex'
import name from './name'
import list from './list'
import todos from './todos'

Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    name,
    list,
    todos
  },
  
})

name.js

const state = {
  name:"zhangsan",
  path:"上海"
}

const getter = {
  path: state => {
    return state.name + state.path
  },

}

const mutations = {
  changeName (state, name) {
    state.name = name
  },

}
const actions = {

}

export default  {
  state,
  getter,
  mutations,
  actions
}

list.js

const state = {
  list:{}
}

const getter = {

}
const mutations = {
  changeList (state, data) {
    state.list = data
  }
}
const actions  {
  getDate (store) {
    axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
      console.log(res.data)
      store.commit('changeList', res.data)
    }).catch(error => {

    })
  }

}

export default  {
  state,
  getter,
  mutations,
  actions
}

todos.js

const state = {
  todos: [
    {
      id: 1,
      name: 'lisi'
    },
    {
      id: 2,
      name: 'zhangsan'
    },
    {
      id: 3,
      name: 'wangwu'
    }
  ],
}

const getter = {
  // 通过传参来决定取哪一个数据
  todos: state => id => {
    return state.todos.find(todo => todo.id === id)
  }
}

const mutations = {

}
const actions = {

}

export default {
  state,
  getter,
  mutations,
  actions
}

这样每个状态都有自己的vuex的状态了