1.Vuex安装

最新推荐文章于 2023-08-21 23:18:39 发布

weixin_45963440

最新推荐文章于 2023-08-21 23:18:39 发布

阅读量244

点赞数

分类专栏： # Vuex 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45963440/article/details/109589300

版权

本文介绍了如何安装和创建Vuex实例，包括两种创建方式。首先讲解了在state中创建count字段，通过mutations修改state数据的基本流程。接着详细阐述了新建Vue工程的步骤，包括全局安装vue-cli，创建项目并配置。然后在Vue项目中引入和配置Vuex，最后补充了配置语法检查和使用git上传项目的操作指南。

摘要由CSDN通过智能技术生成

1.安装Vuex

# 1.vuex使用流程
# 1)安装vuex
npm install vuex --save (安装到vue项目中,通常使用这个)
或者npm install vuex(安装到系统中)

# 2)引入vuex:在main.js中
import Vuex from './vuex'
Vue.use(Vuex);//此步骤必须操作,否则无法引入Vuex

# 2)创建vuex实例
new Vuex.store()
示例:const store = new Vuex.Store({
   
    state: {
   
      count:0
    }
});

# 3)main.js中将vuex实例挂载到vue对象上去
new Vue({
   
  el: '#app',
  router,
  store,
  components: {
    App },
  template: '<App/>'
})

2.创建一个Vuex实例(方式1)

2.1大致流程如下:

state中创建count字段
mutations中创建一个count++的mutation
button新增click事件触发mutation改变count

2.2代码流程:

流程1:在store对象实例中创建state属性数据

//在main.js中创建一个Vuex实例
Vue.use(Vuex);
const store = new Vuex.Store({
   
    state: {
   
      count:0
    },
    mutations:{
    //显式地提交 (commit) mutation改变store中的状态state
      countIncrease(state){
   
        state.count++;
      }
    }
});

//store.commit('countIncrease');//提交 (commit) mutation改变store中的状态state
//console.log(store.state.count);