vuex基础语法、state代码示例、mutations代码示例

本文主要是介绍vuex基础语法、state代码示例、mutations代码示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、vuex基础语法

1.简介

Vuex 是一个专为 Vue.js 应用程序开发的状态(数据)管理模式。

简单来说就是方便管理管理组件之间的数据共享，原来我们那种父传子、子传父、兄弟组件传值的方式在小型项目中还能应付过来，如果是项目比较复杂，还是建议使用vuex使用数据共享。

2.基础使用步骤

vuex的使用步骤如下：

1.安装vuex

npm install vuex --save

2.导入vuex

import Vuex from 'vuex'
Vue.use(Vuex)

3.创建store对象

state中就是全局共享的数据4

const store=new Vuex.Store({state:{count:0;}
})

4.把store对象挂载到vue实例中

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

备注 我们创建一个练习项目文件夹，注意配置的时候选择安装vuex即可，它会自动生成store文件夹,里面的index.js就是存储的核心文件。

3.state设置共享数据

组件中使用共享数据的语法1：

this.$store.state.数据变量名

组件中使用共享数据的语法2：

import {mapState} from 'vuex'  导入mapState函数把全局state中的数据映射为当前组件的计算属性
computed:{...mapState(['变量名'])
}

 

4.mutations定义修改数据方法 

组件要修改数据建议用mutations

vuex中不建议子组件直接修改全局的store中的共享数据，所以我们要是想修改数据的时候建议使用mutations，便于统一管理。

mutations中定义处理逻辑的方法

export default new Vuex.Store({state: {num: 0},mutations: {方法名(state) {//对于数据的处理逻辑//其中方法中的state形参就是上面的state共享数据对象;}},actions: {},modules: {}
});

组件中通过methods中的方法调用mutations中的方法

methods: {this.$store.commit('方法名')}

二、state代码示例 

初始化一个测试项目demo1,注意安装vuex

components中新建两个子组件Son1.vue和Son2.vue

App.vue中引入两个子组件并注册

<template><div id="app"><Son1></Son1><Son2></Son2></div>
</template><script>
import Son1 from "./components/Son1.vue";
import Son2 from "./components/Son2.vue";export default {name: "App",components: {Son1,Son2}
};
</script>

• store/index.js新建公共的数据模型

export default new Vuex.Store({state: {num: 0},。。。
});

• 方式1引入公共数据 Son1.vue中使用num

<template><div>子组件1<p>{{$store.state.num}}</p></div>
</template>

• 方式2引入公共数据

<!-- 子组件1 -->
<template><div>子组件1<p>{{num}}</p></div>
</template><script>
import { mapState } from "vuex";
export default {data() {return {};},computed: {...mapState(["num"])}
};
</script>

同理，Son2.vue也是如此使用。 

三、mutations代码示例

1.mutations第一种使用方式

store/index.js中定义如下：

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {num: 0},mutations: {addHandle(state) {state.num++;},addHandle2(state, arg) {state.num += arg;}},actions: {},modules: {}
});

Son1.vue中调用如下：

<!-- 子组件1 -->
<template><div>子组件1<button @click="clickHandle">点击增加1</button><button @click="clickHandle2">点击传递参数</button><p>{{$store.state.num}}</p></div>
</template><script>
export default {data() {return {};},methods: {clickHandle: function() {this.$store.commit("addHandle");},clickHandle2: function() {this.$store.commit("addHandle2", 2);}}
};
</script>

 此时Son1.vue中点击按钮1，页面显示的数字就会增加1，点击按钮2，页面显示的数字就会增加2.

2.mutations第二种使用方式

store/index.js中定义如下：

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {num: 0},mutations: {addHandle(state) {state.num++;},addHandle2(state, arg) {state.num += arg;}},actions: {},modules: {}
});

Son1.vue中调用如下：

<!-- 子组件1 -->
<template><div>子组件1<button @click="clickHandle">点击增加1</button><button @click="clickHandle2">点击传递参数</button><p>{{$store.state.num}}</p><!-- <p>{{num}}</p>  --></div>
</template><script>
import { mapMutations } from "vuex";
export default {data() {return {};},methods: {...mapMutations(["addHandle", "addHandle2"]),clickHandle: function() {this.addHandle();},clickHandle2: function() {this.addHandle2(2);}}
};
</script>

这篇关于vuex基础语法、state代码示例、mutations代码示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---