vue-vuex（vue状态管理）_vuex setter方法的作用-CSDN博客

5分钟带你入门vuex（vue状态管理）

如果你之前使用过vue.js，你一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，那么接下来我们就来学习一下vuex是如何修改状态值的：

我们新建一个vue项目（这里由于我们是讲解vuex，所以对于vue项目的创建我们不会讲解太详细）；

在命令行输入 vue init webpack web（使用webpack创建一个项目名为web的项目）；

项目创建后，然后安装vuex，使用命令：npm install vuex --save（安装vuex保存到本地），安装成功后你会看到这个界面：

然后我们执行npm run dev 启动项目，在浏览器输入："localhost:8080"；正常的话然后我们会看到项目的启动页，

看到这个界面说明项目启动成功，然后我们在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        loginInfo: {
            worker: '',
            stationNum: ''
        },
    },
    getters: {
        getUserInfo(state) {
            console.log("获取登录用户信息");
            return state.userInfo;
        },
    },
    mutations: {
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo;
        },
    },
    actions: {
        setUserInfo(context, userInfo) {
            context.commit('setUserInfo', userInfo);
        },
    }

});

export default store;

然后我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；

main.js

import store from '@/components/store';
new Vue({
    el: '#app',
    store, // 存储
    router,
    components: {App},
    template: '<App/>',
    watch: {},
    created() {
    },
    mounted() {
    }
});

state, getters, setters, mutations, actions详细介绍

获取数据

State：

vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；

this.$store.state.loginInfo.worker

Getters：

Getter相当于vue中的computed计算属性，

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果，这里我们修改Hello World.vue文件如下：

this.$store.getters.getUserInfo

修改

Mutations(变化)：

main.js中

mutations: {
    setUserInfo(state, userInfo) {
        state.userInfo = userInfo;
    }
}

如果需要修改store中的值唯一的方法就是提交mutation来修改，然后在里面直接提交mutations中的方法修改值：

this.$store.commit('setUserInfo')

Actions：

我们达到了修改store中状态值的目的，但是，官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数：

actions: {
    setUserInfo(context, userInfo) {
        context.commit('setUserInfo', userInfo);
    },
}

然后我们去修改Hello World.vue文件：

this.$store.dispatch('setUserInfo', true)

这里我们把commit提交mutations修改为使用dispatch来提交actions；我们点击页面，效果是一样的。

https://www.cnblogs.com/m2maomao/p/9954640.html

mapState, mapGetters, mapActions, mapMutations

这些名字呢，是对应四大金刚的一个辅助函数，

a).mapState，官网说：

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

对于官网给出的例子，截个图，供学习，详情请进官网：https://vuex.vuejs.org/zh-cn/state.html , 我记录下官网说的少的 ...mapState() 方法

vue 现在好多例子，都是用es6 写的，es6中增加了好多神兵利器，我们也得用用。我们也要用‘对象展开运算符'，这个具体的用法，请参考具体的学习资料，我们主要讲讲 ...mapState({...}) 是什么鬼。

下面实例代码中：

html:

<p>

　　mapState方式 {{viewsCount}}；<br>

　　直接使用views {{this.$store.state.views}}

</p>

js:

...mapState({

viewsCount: 'views'

}),

　　我们需要使用一个工具函数将多个对象合并为一个，这个 ... 方法就合适了，将多个函数方法合并成一个对象，并且将vuex中的this.$store.views

映射到this.viewsCount (this -> vue)上面来，这样在多个状态时可以避免重复使用，而且当映射的值和state 的状态值是相等的时候，可以是直接使用

...mapState({

'views'

}),

b).mapMutations 其实跟mapState 的作用是类似的，将组件中的 methods 映射为 store.commit 调用

上面的代码：

html:

<span>{{this.$store.state.total}}</span>

<p>

<button @click="totalAlise">点击增加total</button>

</p>

js:

...mapMutations({

totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定义的一个别名方法，本组件直接调用这个方法

})

c). mapActions, action的一个辅助函数，将组件的 methods 映射为 store.dispatch 调用

上例代码：

html：

1 2	`<h4>blogNumber数字 </h4>` `<span>state中blogNumber：{{this.$store.state.blogNumber}}</span>`

js:

方法调用：

created () {

// this.$store.dispatch('blogAdd') // 直接通过store的方法触发action, 改变 views 的值

this.blogAdd() // 通过mapActions 触发mutation 从而commit ，改变state的值

},

方法定义：

1 2	`...mapActions({` `blogAdd:` `'blogAdd'` `// blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，blogAdd 才是actions里面函数方法名称 })`

d). mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性：

html: