vuex的使用

vuex

vuex是什么 ?

• 状态管理工具
• 状态即数据 ,状态管理就是管理组件中的data数据
• Vuex中的状态管理工具 , 采用了 集中式方式统一管理项目中组件之间需要通讯的数据

如何使用

• 最佳使用 : 只把组件之间共享的数据放到vuex中进行管理
• vuex中的数据也是响应式的,如果一个组件修改了vuex中的数据,另一个使用vuex数据的组件就会自动更新(vuex和localstorage的区别)

什么时候用

• 当组件通讯多,组件之间的关系复杂时,才使用

vuex的使用

• 安装 npm i vuex
• 引入: 前提是必须要引入vue ,vuex依赖于vue

vuex的基本使用

//实例化仓库(管理共享的数据)
const store = new Vuex.Store({
    //严格模式下,不允许外部去修改仓库里的数据,只能在仓库里进行修改
    strict : true,
    //状态即数据 相当于 vue中的data
    state: {
        count: 11
    },
    //相当于vue中的methods
    mutations: {
        increament(state) {
            //默认第一个参数 是 state
            state.count = 22
        }
    }
})
//获取
console.log(store.state.count)
//修改
store.commit('increament')
console.log(store.state.count)

vuex的传参

const store = new Vuex.Store({
    strict: true,
    state: {
        count: 11
    },
    mutations: {
        //payload 载荷
        increatment(state, payload) {
            console.log(payload.page)
        }
    }
})
//传参最好传一个对象,方便查看
store.commit('increatment', {
    page: 2
})

vuex和vue的配合

const store = new Vuex.Store({
    strict:true,
    state:{
        num:10
    },
    mutations:{
        add(state){
            state.num ++
        }
    }
})

new Vue({
    el:'#app',
    store,
    methods:{
        add(){
            this.$store.commit('add')
        }
    }
})

仓库配置

const store = new Vuex.Store({
    //严格模式
  	  strict: true,
    //状态:数据
  	  state:{},
    //相当于vue中的methods方法(不能有异步)
      mutations:{},
    //相当于vue中的computed计算属性
      getters:{},
    //处理异步操作
      actions:{}
})
//可以抽离出去

state

//vue中  data里存放 只在当前组件 使用的数据,
data(){
    return {
        name:''
    }
}
//vuex中  存放 所有组件共享的数据
state:{
    list:[
        {id:1,name:'ls'}
    ]
}

//使用
<h1>{{ $store.state.name }}</h1>
v-for='item in $store.state.list'

mutations

//vue
methods:{
    add(){
        //可以把当前组件里的数据传递给vuex ,让vuex对数据增删改查
        this.$store.commit('add', this.name)
    }
}
//vuex
mutations:{
    add(state,payload){
        //state 仓库里的数据  state.list
        //payload 要修改仓库里的参数
    }
}

getters

//vue 
computed:{
    $store.getters.isShow
   	$store.getters.isClear
}
//vuex
getters:{
    isShow(state){
       return state.list.length > 0 
    },
        isClear(state){
            return state.list.filter(item => !item.done).length
        }
}

//使用 
v-show='isShow'
<strong>{{ isClear }}</strong>

actions

//vue
methods:{
    delTodo(id){
        //commit 同步 => mutations
        this.$store.commit('delTodo' ,{id})
        // dispatch 异步 => actions
        this.$store.dispatch('asyncDelTodo',{id})
    }
}
//vuex
mutations:{
    delTodo(state,payload){
       state.list = state.list.filter(item => item.id != payload.id)
    }
}
actions:{
    asyncDelTodo(context, payload) {
        setTimeout(() => {
            //触发mutations 里的同步方法
          context.commit('delTodo', payload)
        }, 2000)
  }
}

常见的几个辅助函数

问题 : 每次都需要使用 this.$store.commit去触发方法,太麻烦

解决 : 使用映射

• 使用 步骤
  • 导入对应的辅助函数
  • 映射
  • 使用

mapGetters(映射getters)

//vuex
getters:{
	isShow(state){...}
    isClear(state){...}
}

//vue
//1.导入辅助函数
import {mapGetters} from 'vuex'

computed:{
    //2.映射计算属性(vuex对应的是 getters)
    ...mapGetters(['isShow','isClear'])
}
//之前使用 
    <footer v-show='$store.getters.isShow'></footer>
//现在使用
    <footer v-show='isShow'></footer>

mapMutations (映射mutations)

//映射mutations方法
...mapMutations(['delTodo','updateTodo'])

//可以起别名(防止当前所在函数名和mutations名一致会造成死循环)
    ...mapMutations({
        del:'delTodo',
        update:'updateTodo'
    })
//之前使用
	this.$store.commit('delTodo',{id})
//现在使用
	this.del({id})  //起别名
	this.delTodo({id})  //没有起别名

mapActions

//映射
...mapActions('asyncDelTodo')

//起别名
    ...mapActions({
        aDT:'asyncDelTodo'
    })
//之前使用
	this.$store.dispatch('asyncDelTodo',{id})
//现在使用
	this.aDT({id}) //起别名
	this.asyncDelTodo({id})

如果有还不知道如何操作的道友们 ,可以 来瞅瞅
一个使用 vuex 实现的todomvc小案例
https://github.com/jisuying/todomvc-vuex