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

一、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：