当前位置：网站首页 / vue2.X / 正文

【AY】从C#转web前端之路记录[3]-vuex浅接入

时间：2020年09月11日 | 作者 : aaronyang | 分类 : vue2.X | 浏览: 164次 | 评论 0 人

继续在第2篇文章下面继续写

vuex:vuex用来保存需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，用于各组件间的值传递。

官方地址：查看

官方说法：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

打开main.js, 接下来，按下Ctrl+ ~

安装vuex

直接这样写会报错

你需要

npm install vuex --save

然后打开main.js注册一下

import Vue from 'vue'
import App from './App.vue'
import routers from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router:routers,
  store:store,
  render: h => h(App),
}).$mount('#app')

增加一个store文件夹

然后下面新建一个index.js

查看官网

写入

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

export default new Vuex.Store({
    state: {
        count: 1,
        isLogin: false,
        data3: 333
    },
    getters: {
        getData1: function(state) {
            return state.count + 1;
        }
    },
    mutations: {
        addCount(state, num) {
            state.count = state.count + num;
        }
    },
    actions: {
        addFun(context, num) {
            context.commit('addCount', num)
        }
    }
})

打红框的地方，是约定的。

黄匡也是约定的参数写法。

这里简单列举了下。

然后我们在component文件夹下面，新增stu.vue,然后

在router/index.js配置路由

stu.vue添加页面代码，先别管vue的语法，双括号，就是说可以加一些脚本代码了。 @click也别管，类似js的onclick

<template>
  <div >
    <p>
   <button @click="add1">按钮1</button>
    </p>
    <h3>{{this.$store.state.count}}</h3>
    
  </div>
</template>

<script>
export default {
  name: 'stu',
  methods:{
    add1(){
        this.$store.dispatch('addFun',2);

    }
  }
}
</script>

然后跑起来,单击按钮，按钮下的 1，每次+2，就变3了，然后5.。。

具体感觉就像绑定了，这也是vue最基本的。没有像jquery，找到这个h3，然后修改innertext。

这里

this.$store.dispatch('addFun',2);

this.$store.dispatch这几个都是固定的，你也可以

你也可以

getters里面的getData1是每次state.count+1;

接下来测试个好玩的。

修改helloworld的vue代码：

<template>
  <div>
    <h1>{{ msg }}</h1>
 
    <p>
   <button @click="add1">按钮helloworld</button>
    </p>
    <h3>{{this.$store.state.count}}</h3>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    add1(){
        this.$store.dispatch('addFun',2);

    }
  }
}
</script>

然后修改router/index.js

把history模式换成hash模式