vuex学习

前言

• Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。
• 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。
• 如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

一、安装vuex

npm install vuex --save

• 卸载

npm uninstall vuex

• vue2 安装的是vuex3版本，vue3 安装的是vuex4版本

npm install --save vuex@3

二、创建store

• 在项目src目录下创建store目录，在store目录中创建index.js文件。写入一下内容：

import Vue from 'vue'
import Vuex from 'vuex'
// 挂载Vuex
Vue.use(Vuex)
// 创建Vuex对象
const store = new Vuex.Store({
    state:{
        // 存放的键值对就是所要管理的状态
        // 以key:value为例
        key:'value',
        marketName:'富民xx'
    },
    mutations:{
        setKey(state,payload){
            state.key = payload
        }
    }
})
// vue2，要使用vuex3才能正常运行，对应vue3要使用vuex4
export default store

三、挂载store

// 挂载store
import store from './store'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store: store,   //tore:store 和 router一样，将我们创建的Vuex实例挂载到这个vue实例中
  components: { App },
  template: '<App/>'
})

四、在组件中使用vuex

• 将需要使用的值写在computed中：

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

• 如果在组件中使用v-model绑定computed中的值，需要在computed中定义set方法，如下

    computed:{
        key:{
            get(){
                return this.$store.state.key;
            },
            set(val){
                this.$store.commit('setKey',val);
            }
        },
    },

五、在Vue组件中监听Vuex

• 通过computed获取vuex中的状态值。
• 通过watch监听值的改变。

    watch:{
        key(val){
            console.log('key变了：'+val);
        }
    },

六、核心概念

(1) state

• 单一状态树
• vuex使用单一状态树，用一个对象就包含了全部的应用层级状态

// 创建Vuex对象
const store = new Vuex.Store({
    state:{
        // 存放的键值对就是所要管理的状态
        // 以key:value为例
        key:'value',
        marketName:'富民xx'
    },
})

组件中通过 this.$store.state.xxx 读取状态

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

mapState 辅助函数

import { mapState } from 'vuex'
export default {
    // computed:mapState({
    //     key: state=>state.key,
    //     marketName: state=>state.marketName
    // })
    // computed:mapState([
    //     'key',
    //     'marketName'
    // ])
    computed:{
        ...mapState({
            key: state=>state.key,
            marketName: state=>state.marketName
        })
    }
}

(2) Mutation

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。

vuex中

    mutations:{
        setKey(state,payload){
            state.key = payload
        },
        setMarket(state,val){
            state.marketName = val
        }
    }

组件中

        key:{
            get(){
                return this.$store.state.key;
            },
            set(val){
                this.$store.commit('setKey',val);
            }
        },
        marketName:{
            get(){
                return this.$store.state.marketName;
            },
            set(val){
                this.$store.commit('setMarket',val);
            }
        },

(3) Getter

• 从 store 中的 state 中派生出一些状态

    state:{
        // 存放的键值对就是所要管理的状态
        // 以key:value为例
        key:'value',
        marketName:'富民xx',
        todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false }
        ]
    },
    getters:{
        doneTodos(state){
            return state.todos.filter(todo=>!todo.done)
        }
    },

        arr(){
            return this.$store.getters.doneTodos
        }

结果：

(4) actions

• Action 类似于 mutation
• Action 提交的是 mutation，而不是直接变更状态。

注册一个简单的 action

    actions:{
        increment({commit},val){
            commit('setMarket',val);
        }
    }

通过 store.dispatch 方法触发：

this.$store.dispatch('increment','菜丁农贸xx');