Vue Vuex使用详解

基本使用

• 作用

vuex是用来做状态管理的，就是将部分数据集中存储起来，实现每个组件之间的共享。

• 安装

npm install vuex --save

• 创建store目录

• 编辑index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
    state:{
        name:"vuex原始数据"
    },
    mutations:{
        change(state,payload) {
            state.name = payload
        }
    },
    getters:{
        getPlus(state){
            return state.name + "---getters扩展数据";
        }
    }


})
// 导出对象
export default store

• 挂载到main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
// 导入
import store from "./store";

Vue.config.productionTip = false

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

state的使用

• 概念

state中要声明我们要管理的数据，它可以被所有组件共享。

• 在state中初始化数据

const store = new Vuex.Store({
    state:{
        name:"vuex原始数据"
    }
})

• 在组件中使用

<template>
    <div>
        <h1>首页组件</h1>
        <h2>{{$store.state.name}}</h2>
    </div>

</template>

getters的使用

• 概念

可以直接将它理解为vue中的计算属性。

• 在js中创建getters

const store = new Vuex.Store({
    state:{
        name:"vuex原始数据"
    },
    getters:{
        getPlus(state){
            return state.name + "---getters扩展数据";
        }
    }


})

• 在组件中使用

<template>
    <div>
        <h1>首页组件</h1>
        <h3>{{$store.getters.getPlus}}</h3>
    </div>

</template>

• getters作为参数和getters传递参数

getters: {
    fullname(state) {
      return state.name + '11111'
    },
    fullname2(state, getters) {
      return getters.fullname + '2222'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  }

getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数

 mutations的使用

• 概念

它的作用就是提供让组件修改state中数据的接口。

• 定义mutations

const store = new Vuex.Store({
    state:{
        name:"vuex原始数据"
    },
    mutations:{
        change(state,payload) {
            state.name = payload
        }
    }
})

payload为组件传进来的参数，如果有多个参数要传入，应传入一个对象。

• 在组件中使用

export default {
        name: "home",
        methods:{
            change(){
                // 第一个参数是mutations的方法名，第二个是要传入的数据
                this.$store.commit('change',"Home数据");
            }
        }
    }

 // 1.普通的提交封装
this.$store.commit('incrementCount', count)

// 2.特殊的提交封装
this.$store.commit({
    type: 'incrementCount',
    count
})
// 3.传入对象
const stu = {id: 114, name: 'alan', age: 35}
this.$store.commit('addStudent', stu)

• 响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.
这就要求我们必须遵守一些Vuex对应的规则:
    提前在store中初始化好所需的属性.
当给state中的对象添加新属性时, 使用下面的方式:
    方式一: 使用Vue.set(obj, 'newProp', 123)
    方式二: 用新对象给旧对象重新赋值

actions的使用

• 概念

为了是vue的开发工具vue-devtools能够监听所有变量的变化，所有的异步操作都应该有actions来完成

• 基本使用

• context是什么?

context是和store对象具有相同方法和属性的对象.
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

modules的使用

• 概念

它就是为了解决只有一个vuex对象在数据过多的情况下会导致不好管理的情况，一个module就是一个小vuex对象。

• 基本使用

// module对象
const moduleA = {
  state: {
    name: 'zhangsan'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  getters: {
    fullname(state) {
      return state.name + '11111'
    },
    fullname2(state, getters) {
      return getters.fullname + '2222'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    aUpdateName(context) {
      console.log(context);
      setTimeout(() => {
        context.commit('updateName', 'wangwu')
      }, 1000)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

<h2>{{$store.state.a.name}}</h2>

详解：https://vuex.vuejs.org/zh/guide/modules.html