vue状态管理（vuex）

标签：use   一个   com   product   添加   return   bsp   新建   干货   

vuex，官方定义为状态管理，其实这个状态管理，和H5本地缓存的作用很相似，通俗的讲，就是存储一些公用的东西，提供给各个组件使用，和服务器端的session功能也很类似。

不同的是，vuex在刷新页面的时候，会自动还原到初始的状态，话不多说，我们直接上干货：

1.安装vuex:npm install vuex --save

2.需要在man.js中引用如下代码

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import vuex from ‘vuex‘
Vue.config.productionTip = false
Vue.use(vuex)

new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

3.在根目录下新建vuex文件加，新建文件store.js,在js文件中，写如下代码：

import vue from ‘vue‘
import Vuex from ‘vuex‘
vue.use(Vuex)
const state={
    count:1
}

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

export default new Vuex.Store({
    state,mutations
})

说明：count:1是一个状态管理的属性，这里你可以设置自己的属性，例如：loginstate:object

const mutations是一个固定的写法，这里的作用是修改state中的属性，如count，里面的方法可以自己的定义.
若要传参的话，只能传递一个参数，如：

 add(state){
        state.count++;
    }方法，如果要传递参数，只能传递一个参数写成：

 add(state，parameters){
       ....
    }

4.前端调用：

4.1在页面引用vuex,

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  store,
  computed: {
  
  },
  methods: {
   
  }

 computed: {
    computedcount() {
      return this.$store.state.computedcount;
    }
}

import { mapState} from "vuex";

 ...mapState({
      mapcount: state => state.mapcount
    }),
    ...mapState(["mapcount"]),

vue状态管理（vuex）

标签：use   一个   com   product   添加   return   bsp   新建   干货   

原文地址：https://www.cnblogs.com/PiaoYu/p/11437582.html