本文主要是介绍vuex基础语法、state代码示例、mutations代码示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、vuex基础语法
1.简介
Vuex 是一个专为 Vue.js 应用程序开发的状态(数据)管理模式。
简单来说就是方便管理管理组件之间的数据共享，原来我们那种父传子、子传父、兄弟组件传值的方式在小型项目中还能应付过来，如果是项目比较复杂，还是建议使用vuex使用数据共享。
2.基础使用步骤
vuex的使用步骤如下：
1.安装vuex
npm install vuex --save2.导入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代码示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
