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的状态了