vuex基本使用方法

vuex的使用流程

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

核心属性

State

vuex的基本数据，用来存储变量，可以把它是为vue中的data。

getters

可以把它是为vue中的computed，计算属性，可以对state中的变量进行处理。

使用 store.commit 方法触发

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，可以把它视为vue中的methods。

使用store.dispatch 方法触发

modules

模块，将store分割

基本使用

一、创建同级的store文件

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
　　state:{
　　　　name:"初始的name"
　　},
　　getters:{
　　　　// 第一个参数是state,第二个是getters
　　　　dealName(state,getters){
　　　　　　return "处理一下的name,值为："+state.name
　　　　}
　　},
　　mutations:{
　　　　// 第一个参数是state,第二个参数为提交载荷，emmm，赋值的新值
　　　　setName(state,payload){
　　　　　　　state.name = payload
　　　　}
　　},
　　actions:{
　　　　// 第一个参数为对象，与store 实例具有相同方法和属性的 context 对象，第二个参数与mutation一样
　　　　setNameAction({commit},payload){
　　　　　　commit("setName",payload)
　　　　}
　　}
})

二、main.js引入store

import store from './store'



new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

三、页面上使用

使用vuex

// 使用commit直接调用mutations里的setName方法改变state里的变量的值
this.$store.commit("setName", "mutation改变name");

// 使用dispatch调用actions里的方法来调用mutations间接改变state里的变量的值
this.$store.dispatch("setNameAction", "action改变name");

获取vuex里是值

// 给页面data里的同名参数名或者自定义参数名赋值
created () {
	this.name = this.$store.state.name
}

// 直接页面上使用name
computed: {
	name() {
     	return this.$store.state.name
    }
}

辅助函数

mapState

为组件创建计算属性以返回 Vuex store 中的状态

可以理解为引入的多个状态的时候，为了少写代码，简便使用

使用方法 ：

页面引入mapState

import { mapState } from 'vuex' 

#第一种

 computed: mapState(['changename'])
 methods: {     
	 changename() {
	 	return this.$store.state.name
	 }
 }

#第二种

 computed: mapState({
    name: state => state.name
 })

#第三种

computed: {
	...mapState({
		name: state => state.name
	})
}

mapGetters

为组件创建计算属性以返回 getter 的返回值

直接使用getters里的计算方法

使用方法 ：

页面上引入mapGetters

import { mapGetters } from 'vuex' 

获取getters里的计算方法，直接使用
#第一种

computed:{
	...mapGetters({
          dealName: 'dealName' // dealName不是字符串，对应的是getter里面的方法
 	})
}

#第二种

 computed:mapGetters(['dealName']),

html里使用

<div @click="dealName"></div>

mapActions

创建组件方法分发 action

直接获取actions里的方法，直接使用

使用方法 ：

页面上引入mapActions

import { mapActions} from 'vuex' 

获取actions里的计算方法

 ...mapActions({
      masyncNameAction: "setNameAction"
  }),

html里使用

<div @click="masyncNameAction('张三')"></div>

mapMutations

创建组件方法提交 mutation

页面上直接获取mutations里的方法，直接使用

使用方法 ：

页面上引入mapMutations

import { mapMutations} from 'vuex' 

获取mutations里的计算方法
#第一种

methods:{
	 ...mapMutations(['setName'])//mutations里的方法名
}

#第二种

methods:{
	...mapMutations({setName: 'setName'})
}

#第三种

 methods: {
    ...mapMutations({
        setName: (commit, setName) => {
            commit("setName", setName)
        },
    }),

 }

html页面上使用

<div @click="setName('张三')"></div>

模块开发

分模块开发更加有利于代码管理

实例：

store文件的index.js里引入各个模块文件

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user,
    tagsView,
    permission,
    settings
  },
  getters
})

export default store

分模块文件user.js

每个模块同样拥有state、getters、mutations、actions等属性

#第一种写法

export default{
    namespaced:true, 
    state:()=>{
        return {
            'name':''
        }
    }
}

#第二种写法

const user = {
	state:{
　　　　name:"初始的name"
　　},
　 	getters: {
       // 第一个参数是state,第二个是getters
        dealName(state) {
            return "处理一下的name,值为" + state.name;
        }
    },
    mutations: {
        // 第一个参数是state,第二个参数为提交载荷，emmm，赋值的新值
        setName(state, payload) {
            state.name = payload;
        }
    },
    actions: {
        // 第一个参数为对象，与store 实例具有相同方法和属性的 context 对象，第二个参数与mutation一样
        setNameAction({ commit }, payload) {
            commit("setName", payload);
        }
    }
}
export default user